/* ===========================================================
1. TOKENS
=========================================================== */
:root{
/* Fond de page blanc : le blanc, le bleu nuit et l or sont la triade de la marque.
Les cartes restent blanches et se detachent par un filet net + une ombre a peine
perceptible ; les sections alternees utilisent un gris quasi imperceptible. */
--bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7FA;
--band:#091734; --band-2:#0F2247; --band-ink:#EAF0F6; --band-muted:#9BB0C6;
--ink:#0C1724; --muted:#56677B; --line:#D3DCE7; --line-soft:#E7ECF2;
/* Or echantillonne sur Logo_Bursenma.png (source haute definition, 71 911 pixels).
Degrade metallique : #81570C ombre, #B17E24 median, #D29F3C percu,
#E7B64E clair, #F7C861 reflet.
L or percu ne tient pas le AA en texte sur blanc (2,40:1) : il reste
decoratif, et les variantes sombre/claire portent le texte. */
--accent:#D29F3C; --accent-ink:#81570C; --accent-bright:#E7B64E; --on-accent:#FFFFFF; --accent-btn:#81570C; --accent-btn-hover:#6B470A;
--band-line:#213A63; --band-surface:#142B55;
--card-shadow:0 1px 2px rgba(12,23,36,.045), 0 0 0 0 rgba(0,0,0,0);
--ph-bg:#F5EFE3; --ph-ink:#6E4A0B; --ph-line:#D29F3C;
--font-title:"Archivo","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-body:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
--wrap:1180px;
--gut:20px;
/* Palette unique : blanc, bleu nuit et or du logo, identique sur tous les ecrans.
Le thème sombre du § 8.2 du cahier a ete retire a la demande du client, pour que
les couleurs de marque ne varient pas d un appareil a l autre. */
color-scheme:light;
}
/* ===========================================================
2. BASCULE DE LANGUE (seules règles !important autorisées)
=========================================================== */
:root[data-lang="en"] .fr{ display:none !important; }
:root:not([data-lang="en"]) .en{ display:none !important; }
/* ===========================================================
3. BASE
=========================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--font-body); font-size:17px; line-height:1.62;
font-weight:400; -webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-title); font-weight:700; line-height:1.14; margin:0; text-wrap:balance; letter-spacing:-.015em; }
h1{ font-size:clamp(34px,4.4vw,55px); }
h2{ font-size:clamp(27px,3.1vw,38px); }
h3{ font-size:19px; line-height:1.3; }
h4{ font-size:17px; line-height:1.35; font-weight:600; }
p{ margin:0; max-width:65ch; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
strong{ font-weight:600; }
img,svg{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
::selection{ background:var(--accent); color:var(--on-accent); }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{
position:absolute; left:-9999px; top:0; z-index:200;
background:var(--accent-btn); color:var(--on-accent);
padding:12px 18px; font-family:var(--font-title); font-weight:600;
}
.skip:focus{ left:0; }
/* Sur-titre de section */
.kicker{
/* Titre de section. Etait en mono 500 / 12 px / .14em : conforme AA (5,42:1)
mais typographiquement trop fragile pour etre lu d un coup d oeil.
Passe en Archivo 700, plus grand, moins espace, avec un filet or qui
l ancre visuellement. Le mono reste reserve au vocabulaire documentaire
(P01-P09, etapes, Incoterms, libelles de fiche). */
display:flex; align-items:center; gap:11px;
font-family:var(--font-title); font-weight:700; font-size:13.5px;
letter-spacing:.10em; text-transform:uppercase; color:var(--accent-ink);
margin-bottom:18px;
}
.kicker::before{
content:""; flex-shrink:0; width:26px; height:2px;
background:var(--accent); border-radius:1px;
}
.band .kicker, .hero .kicker{ color:var(--accent-bright); }
.band .kicker::before{ background:var(--accent-bright); }
/* Le sur-titre du hero garde sa forme de fil d etiquettes, sans filet :
il doit tenir sur une ligne et le filet lui volerait 37 px. */
.hero .kicker{ display:block; font-size:12.5px; letter-spacing:.11em; }
.hero .kicker::before{ display:none; }
/* Meme traitement pour les sous-titres de bloc */
.subhead{
display:flex; align-items:center; gap:10px;
font-family:var(--font-title); font-weight:700; font-size:12.5px;
letter-spacing:.09em; text-transform:uppercase;
}
.subhead::before{ content:""; flex-shrink:0; width:20px; height:2px; background:var(--accent-bright); border-radius:1px; }
.ref{ font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums; }
.lead{ font-size:19px; color:var(--muted); }
.band .lead, .ftr .lead{ color:var(--band-muted); }
/* Placeholder visible : § 4 CLAUDE.md */
.ph{
font-family:var(--font-mono); font-size:.86em; font-weight:500;
background:var(--ph-bg); border:1px dashed var(--ph-line);
color:var(--ph-ink); padding:1px 7px; border-radius:3px;
white-space:normal; overflow-wrap:anywhere;
}
.band .ph, .ftr .ph{ color:var(--accent-bright); border-color:var(--accent-bright); background:#212E4A; }
/* Sections et alternance de fond */
.sec{ padding:88px 0; }
.sec--alt{ background:var(--surface-2); }
.band{ background:var(--band); color:var(--band-ink); }
.band h1,.band h2,.band h3,.band h4{ color:var(--band-ink); }
/* 620 px = 65ch a 19 px, la mesure que le chapeau avait deja par la regle
generale p{max-width:65ch}. Le titre s y aligne au lieu de courir
jusqu a 820 px. Liberer le paragraphe est indispensable : sans cela
il resterait borne a 65ch et les deux bords se decaleraient encore
des que la police de base changerait. */
/* Pas de plafond sur le bloc : un H2 de 55 signes plie en deux lignes
dans 620 px alors qu il tient sur une dans les 1140 du site, et le
client lisait cette colonne etroite au milieu d un ecran large comme
un texte coupe. Le titre prend la largeur du site ; le chapeau garde
une mesure, 820 px, celle du H1 de page et de .visionbox. */
/* Le chapeau non plus : 820 px, soit trois lignes dans une page de
1140, le client le lisait encore comme coupe. Il prend la largeur du
site, en connaissance de cause - 120 signes par ligne a 19 px. */
.sec-head{ display:grid; gap:18px; margin-bottom:46px; }
.sec-head p{ max-width:none; }
/* ===========================================================
4. BOUTONS
=========================================================== */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--font-title); font-weight:600; font-size:16px;
padding:14px 26px; border-radius:4px; border:1px solid transparent;
text-decoration:none; cursor:pointer; transition:background .18s,color .18s,border-color .18s;
}
.btn--primary{ background:var(--accent-btn); color:var(--on-accent); border-color:var(--accent-btn); }
.btn--primary:hover{ background:var(--accent-btn-hover); border-color:var(--accent-btn-hover); }
/* Bouton secondaire : contour dore. L or vif ne tient pas les 3:1 de la WCAG 1.4.11
sur blanc (2,29), d ou l or profond sur fond clair et l or de marque sur bande. */
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--accent-ink); }
.btn--ghost:hover{ border-color:var(--accent-btn-hover); color:var(--accent-ink); background:rgba(210,159,60,.07); }
.band .btn--ghost{ color:var(--band-ink); border-color:var(--accent); }
.band .btn--ghost:hover{ border-color:var(--accent-bright); color:var(--accent-bright); background:rgba(210,159,60,.10); }
.btn--sm{ padding:10px 18px; font-size:15px; }
/* ===========================================================
5. EN-TÊTE COLLANT
=========================================================== */
.hdr{
position:sticky; top:0; z-index:100;
background:var(--band); color:var(--band-ink);
border-bottom:1px solid var(--band-line);
}
.hdr__in{ display:flex; align-items:center; gap:22px; min-height:68px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; flex-shrink:0; }
/* Symbole du logo sur plaque blanche. Indispensable : le symbole est compose
a 55 % de bleu nuit, il disparaitrait a moitie sur un en-tete bleu nuit.
Tant qu il n existe pas de version reversee (or ou blanc) fournie par le
graphiste, la plaque claire est la seule facon de l afficher entier. */
.brand__mark{
height:38px; width:auto; flex-shrink:0;
background:#FFFFFF; border-radius:4px; padding:4px 7px;
}
.brand__txt{ display:grid; line-height:1.1; }
.brand__name{ font-family:var(--font-title); font-weight:700; font-size:15.5px; letter-spacing:.02em; color:var(--band-ink); }
.brand__sub{ font-family:var(--font-mono); font-weight:500; font-size:9.5px; letter-spacing:.2em; color:var(--band-muted); text-transform:uppercase; }
.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
font-size:16px; font-weight:600; text-decoration:none; color:var(--band-muted);
padding:8px 12px; border-radius:3px; transition:color .16s,background .16s; white-space:nowrap;
}
.nav a:hover{ color:var(--band-ink); background:var(--band-2); }
.tools{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* Selecteur de langue : globe + liste deroulante native.
Le globe est le seul pictogramme du site : c est un reperage fonctionnel,
pas une decoration. Liste native = accessible et fiable sur mobile. */
.lang{
position:relative; display:flex; align-items:center; gap:7px;
border:1px solid var(--band-line); border-radius:4px; padding:0 9px 0 10px;
transition:border-color .16s;
}
.lang:hover{ border-color:var(--band-muted); }
.lang:focus-within{ outline:2px solid var(--accent-bright); outline-offset:1px; }
.lang__globe{ width:15px; height:15px; flex-shrink:0; color:var(--band-muted); pointer-events:none; }
.lang select{
appearance:none; -webkit-appearance:none;
background:transparent; border:0; outline:0; cursor:pointer;
font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.06em;
color:var(--band-ink); padding:8px 16px 8px 0;
}
.lang select option{ background:var(--band-2); color:var(--band-ink); font-family:var(--font-body); }
.lang::after{
content:""; position:absolute; right:9px; top:50%; width:6px; height:6px;
border-right:1.4px solid var(--band-muted); border-bottom:1.4px solid var(--band-muted);
transform:translateY(-75%) rotate(45deg); pointer-events:none;
}
.burger{
display:none; background:transparent; border:1px solid var(--band-line); border-radius:4px;
width:40px; height:38px; cursor:pointer; padding:0; position:relative;
}
.burger span{ display:block; height:1.5px; width:18px; background:var(--band-ink); margin:3.5px auto; transition:transform .2s,opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
/* ===========================================================
6. HERO
=========================================================== */
.hero{ background:var(--band); color:var(--band-ink); position:relative; overflow:hidden; }
.caps{ position:relative; z-index:2; }
/* La scene video. Le texte occupe la moitie gauche ; la droite est laissee
au plan. Plus de halo or ici : l or sur une image bleutee vire au sale. */
.hero__stage{
position:relative; display:flex; align-items:center;
min-height:clamp(430px, 58vh, 600px); padding:66px 0 74px;
}
.hero__media{ position:absolute; inset:0; z-index:0; background:var(--band-2); }
.hero__media video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Voile bleu nuit. Les valeurs ne sont pas choisies : elles sont le minimum
qui tient le AA, mesure sur les pixels reels de assets/hero.mp4, 20 images
reparties sur les 13 s, dans la boite exacte de chaque texte.
sur-titre or #E7B64E -> 73,0 % exiges <- c est lui qui commande
H1 blanc #EAF0F6 -> 59,5 %
boutons #EAF0F6 -> 57,0 %
D ou 75 % sur la zone de texte : 73 % plus une marge. Le plan y reste
visible la ou il etait noye. Descendre sous 73 % ferait passer le
sur-titre sous 4,5:1 des qu une crete d ecume traverse sa ligne.
Le plateau tient jusqu a 60 % de la largeur parce que la colonne de texte
va jusqu a 58,1 % a 1101 px, la largeur la plus defavorable. Ensuite la
descente est courte : passe 78 %, le plan est quasiment net.
Le degrade vertical ne fait qu ajouter de l opacite. Il ne sert qu a
raccorder le bas de la scene a la bande 01-06, et n allege jamais le texte. */
.hero__media::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(to bottom, rgba(9,23,52,0) 70%, rgba(9,23,52,.42) 100%),
linear-gradient(90deg, rgba(9,23,52,.78) 0%, rgba(9,23,52,.75) 72%, rgba(9,23,52,.20) 88%, rgba(9,23,52,.10) 100%);
}
/* La largeur se pose sur le contenu, pas sur le conteneur : .hero__in est
aussi un .wrap, et lui donner un max-width le recentrait dans la fenetre,
desalignant le texte du logo et du menu.
620 px : la colonne reste sous la barre des 62 % du voile, meme a 1101 px
de large, juste au-dessus de la rupture qui la fait passer pleine largeur. */
/* width:100% : .hero__in est un element flex de .hero__stage, et un element
flex se dimensionne sur son contenu. Sans cela le .wrap ne faisait plus
1180 px mais la largeur du texte, et ses marges auto le recentraient. */
.hero__in{ position:relative; z-index:2; width:100%; }
/* 760 px depuis la passe « textes coupes » : 620 px de titre au milieu
d une scene de 1440 se lisait comme coupe. Le plateau du voile a ete
porte de 60 a 72 % dans le meme geste : la colonne va a 70,8 % a
1101 px. L opacite du plateau n a pas change, la mesure de contraste
sur les pixels de la video reste valable. */
.hero__in > *{ max-width:760px; }
.hero h1{ font-size:clamp(28px, 3.35vw, 43px); margin:0 0 30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* Fiche operation (exemple illustratif) - carte bleu nuit
La seule carte sombre du site, a la demande du client. Elle est aussi
le seul contenu fabrique de la page : la couleur la designe comme un
encart et non comme du contenu courant, ce qui sert la regle du SS 4.
L etiquette Exemple garde sa plaque or (#091734 dessus, 7,40:1).
Tout le texte est sur la rampe sombre : --band-muted 7,95:1 sur
--band et 7,03:1 sur --band-2, --band-ink 16,8:1. Ne pas y laisser
--ink ni --muted, ils tomberaient sous le seuil. */
.sheet{ background:var(--band); border:1px solid var(--band-line); border-radius:4px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; }
.sheet__top{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:13px 18px; background:var(--band-2); border-bottom:1px solid var(--band-line);
}
.sheet__title{ font-family:var(--font-mono); font-weight:500; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted); }
.tag-example{
font-family:var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
background:var(--accent); color:#091734; padding:3px 9px; border-radius:3px; white-space:nowrap;
}
.sheet dl{ margin:0; padding:6px 18px 14px; }
.sheet__row{ display:grid; grid-template-columns:104px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--band-line); }
.sheet__row:last-child{ border-bottom:0; }
.sheet dt{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--band-muted); padding-top:3px; }
.sheet dd{ margin:0; font-size:15.5px; color:var(--band-ink); }
.sheet__note{ padding:0 18px 16px; font-size:12.5px; color:var(--band-muted); line-height:1.5; }
/* Fil des six etapes */
/* Bande de capacites */
.caps{ background:var(--band-2); border-top:1px solid var(--band-line); }
/* Defilement continu. La piste porte deux copies identiques de la liste et se
decale de -50 % : la fin de la premiere arrive exactement la ou commence la
seconde, la boucle est donc invisible. Toute modification de la liste doit
etre faite sur les deux copies, sinon le raccord saute. */
.caps__viewport{
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 42px);
mask-image:linear-gradient(90deg, transparent 0, #000 42px);
}
.caps__track{ display:flex; width:max-content; animation:caps-defile 78s linear infinite; }
@keyframes caps-defile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.caps__row{ display:flex; align-items:center; height:58px; }
.caps__row li{ display:flex; align-items:center; white-space:nowrap; font-size:14.5px; color:var(--band-ink); }
/* Le separateur est un pseudo-element : il ne part pas dans le presse-papier
ni dans la synthese vocale. */
.caps__row li:not(.caps__lab)::before{ content:"\00b7"; color:var(--accent); margin:0 13px; }
.caps__lab + li::before{ content:none; margin:0; }
/* .caps__row li.caps__lab et non .caps__lab : a specificite (0,1,0) la classe
seule perdait la couleur au profit de .caps__row li (0,2,0), et les
libelles de groupe ressortaient blancs au lieu de dores. */
.caps__row li.caps__lab{
margin-left:36px; padding-left:36px; border-left:1px solid var(--band-line);
font-family:var(--font-mono); font-weight:500; font-size:11px;
letter-spacing:.13em; text-transform:uppercase; color:var(--accent-bright);
}
/* Arret du defilement : exige par la WCAG 2.2.2 des qu un mouvement demarre
seul et dure plus de cinq secondes. Realise avec une case a cocher et le
selecteur :checked, donc sans JavaScript. Le survol suspend aussi, mais ne
pouvait pas tenir lieu de mecanisme : il n existe pas au doigt. */
.caps__cb{
position:absolute; width:1px; height:1px; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
}
.caps__cb:checked ~ .caps__viewport .caps__track,
.caps__viewport:hover .caps__track{ animation-play-state:paused; }
/* Le libelle est pose au-dessus du defilement : il lui faut un fond opaque
avant que le texte ne commence, sinon les items passent derriere les
lettres. D ou l ordre fondu 0-34 px, filet a 34 px, texte a 44 px. */
.caps__pause{
position:absolute; top:0; right:0; z-index:3; height:58px;
display:flex; align-items:center; padding-left:44px; padding-right:var(--gut);
font-family:var(--font-title); font-weight:600; font-size:12.5px;
color:var(--band-muted); cursor:pointer; user-select:none;
background:linear-gradient(90deg, rgba(15,34,71,0) 0, var(--band-2) 34px);
}
.caps__pause::before{
content:""; position:absolute; left:34px; top:50%; transform:translateY(-50%);
width:1px; height:20px; background:var(--band-line);
}
.caps__pause:hover{ color:var(--band-ink); }
.caps__cb:focus-visible ~ .caps__pause{ outline:2px solid var(--accent); outline-offset:-3px; border-radius:2px; }
.caps__stop{ display:none; }
.caps__cb:checked ~ .caps__pause .caps__lire{ display:none; }
.caps__cb:checked ~ .caps__pause .caps__stop{ display:inline; }
.visually-hidden{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* ===========================================================
7. POSITIONNEMENT + ENGAGEMENTS
=========================================================== */
.pos__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 52px; align-items:start; }
.pos__grid p + p{ margin-top:16px; }
.pledges{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; margin-top:52px; overflow:hidden; box-shadow:var(--card-shadow); }
.pledges li{ background:var(--surface); padding:26px 24px 28px; }
.pledges b{ display:block; font-family:var(--font-title); font-weight:700; font-size:17px; margin:12px 0 8px; }
.pledges p{ font-size:15px; color:var(--muted); max-width:none; }
/* Le developpement de chaque engagement : « concretement », puis ce
que le client peut exiger de voir dans l offre. Le libelle est en
mono, comme les references : c est un repere documentaire. */
.pledges__dev{ margin-top:10px; font-size:15.5px; }
.pledges__dev strong{ color:var(--ink); font-weight:600; }
.pledges__check{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); display:grid; gap:6px; }
.pledges__lab{
font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.12em;
text-transform:uppercase; color:var(--accent-ink);
}
.pledges__check p{ font-size:15.5px; color:var(--ink); }
.pledges .ref{ font-size:12px; color:var(--accent-ink); letter-spacing:.1em; }
/* ===========================================================
8. POLES P01 - P09
=========================================================== */
.poles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pole{
background:var(--surface); border:1px solid var(--line); border-radius:4px;
border-top:3px solid var(--accent); padding:24px 22px 26px; box-shadow:var(--card-shadow);
display:grid; align-content:start; gap:12px;
transition:border-top-color .18s, transform .18s;
}
.pole:hover{ border-top-color:var(--accent-ink); transform:translateY(-2px); }
.pole__ref{ font-family:var(--font-mono); font-weight:500; font-size:11.5px; letter-spacing:.12em; color:var(--accent-ink); }
.pole h3{ font-size:18.5px; }
.pole p{ font-size:15px; color:var(--muted); line-height:1.58; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.chips li{
font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.04em;
background:var(--surface-2); border:1px solid var(--line-soft); color:var(--muted);
padding:4px 9px; border-radius:3px;
}
.band .chips li, .ftr .chips li{ background:var(--band-surface); border-color:var(--band-line); color:var(--band-muted); }
.note{ font-size:14px; color:var(--muted); font-style:italic; max-width:none; }
.band .note, .ftr .note{ color:var(--band-muted); }
.pole .note{ margin-top:2px; }
/* ===========================================================
9. AGRO-INDUSTRIE (bande sombre)
=========================================================== */
.agro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; margin-top:44px; }
.turnkey{ display:grid; gap:1px; background:var(--band-line); border:1px solid var(--band-line); border-radius:4px; overflow:hidden; }
.turnkey li{ background:var(--band-2); display:grid; grid-template-columns:34px 1fr; gap:14px; padding:14px 18px; align-items:baseline; }
.turnkey b{ font-family:var(--font-mono); font-weight:500; font-size:12.5px; color:var(--accent-bright); font-variant-numeric:tabular-nums; }
.turnkey span{ font-size:15px; color:var(--band-ink); }
.crops h3{ font-family:var(--font-title); font-weight:700; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:14px; }
.subhead{ color:var(--accent-bright); margin-bottom:14px; }
/* ===========================================================
10. METHODE - six etapes
=========================================================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; box-shadow:var(--card-shadow); }
.step{ background:var(--surface); padding:28px 24px 30px; display:grid; align-content:start; gap:10px; }
/* Texte, pas decor : --accent-ink, sinon 2,29:1 sur blanc (cf. CLAUDE.md 7). */
.step__no{ font-family:var(--font-mono); font-weight:500; font-size:30px; color:var(--accent-ink); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.band .step__no{ color:var(--accent-bright); }
.step h3{ font-size:17.5px; }
.step p{ font-size:14.8px; color:var(--muted); line-height:1.56; }
.steps__foot{ margin-top:26px; font-size:16px; color:var(--muted); max-width:none; }
/* ===========================================================
11. AVEC QUI NOUS TRAVAILLONS
=========================================================== */
.clients{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.client{ background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--card-shadow); padding:24px 22px 26px; display:grid; align-content:start; gap:10px; }
.client h3{ font-size:17.5px; }
.client p{ font-size:15px; color:var(--muted); }
/* ===========================================================
12. APPELS OFFRES ET FABRICANTS
=========================================================== */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.duo__card{ background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--card-shadow); padding:30px 28px 32px; display:grid; align-content:start; gap:14px; }
.duo__card h3{ font-size:21px; }
.duo__card p{ font-size:15.5px; color:var(--muted); }
.ticks{ display:grid; gap:9px; margin-top:2px; }
.ticks li{ position:relative; padding-left:20px; font-size:15px; }
.ticks li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:1.5px; background:var(--accent); }
/* Bande showroom de l accueil : une respiration entre les grilles de
cartes. Texte a gauche, bouton a droite, alignes ; pas de cadre,
c est ce qui la distingue des sections en cartes. */
.visit{ display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center; }
.visit__text{ display:grid; gap:14px; max-width:820px; }
.visit h2{ font-size:clamp(24px,2.6vw,32px); }
.visit p{ color:var(--band-muted); font-size:17px; max-width:none; }
.visit .btn{ white-space:nowrap; }
@media (max-width:760px){
.visit{ grid-template-columns:1fr; gap:24px; justify-items:start; }
}
.cta-box{
margin-top:20px; background:var(--band); color:var(--band-ink);
border-radius:4px; padding:34px 32px;
display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
}
.cta-box p{ color:var(--band-muted); font-size:16px; max-width:none; }
/* ===========================================================
13. GROUPE
=========================================================== */
.group{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:12px; }
.group__card{ background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--card-shadow); padding:30px 28px 32px; display:grid; align-content:start; gap:12px; }
.group__card h3{ font-size:21px; letter-spacing:.01em; }
.group__role{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-ink); }
.group__card p{ font-size:15.5px; color:var(--muted); }
/* ===========================================================
14. FAQ
=========================================================== */
/* Pleine largeur du site, comme toutes les pages depuis la passe
« textes coupés » : un accordéon de 900 px au milieu de 1140
laissait un vide à droite, et les réponses bridées à 78ch un
second vide dans la carte. Décision du client, assumée. */
.faq{ display:grid; gap:10px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--card-shadow); }
.faq details[open]{ border-color:var(--accent); }
.faq summary{
cursor:pointer; list-style:none; padding:18px 52px 18px 22px; position:relative;
font-family:var(--font-title); font-weight:600; font-size:17px; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
border-right:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent);
transform:translateY(-70%) rotate(45deg); transition:transform .18s;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq summary:hover{ color:var(--accent-ink); }
.faq__a{ padding:0 22px 20px; }
.faq__a p{ font-size:15.5px; color:var(--muted); max-width:none; }
/* ===========================================================
15. CONTACT + FORMULAIRE
=========================================================== */
/* Le formulaire occupe seul la colonne : les coordonnees sont dans le pied de page.
Largeur bornee pour que les champs ne s etirent pas sur 1180 px. */
.contact__grid{ display:grid; max-width:760px; margin-top:44px; }
/* Le formulaire detaille est groupe en deux ensembles. fieldset/legend est
l element prevu pour cela : un lecteur d ecran annonce le groupe avant
chaque champ. min-width:0 neutralise la largeur minimale intrinseque que
les fieldset imposent encore en grille et en flex. Le .subhead est pose
sur un span a l interieur du legend : un legend dont on change le display
perd son rendu natif, et pas de la meme facon selon le moteur. */
.form fieldset{ border:0; margin:0; padding:0; min-width:0; display:grid; gap:16px; }
.form legend{ padding:0; }
.form legend .subhead{ color:var(--accent-bright); margin-bottom:6px; }
.form__note{ font-size:14.5px; color:var(--band-muted); max-width:62ch; }
.btn--lg{ padding:16px 32px; font-size:17px; }
.form{ display:grid; gap:16px; }
.field{ display:grid; gap:6px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--band-muted); }
.req{ color:var(--accent-bright); }
.field input, .field select, .field textarea{
font-family:var(--font-body); font-size:16px; color:var(--band-ink);
background:var(--band-2); border:1px solid var(--band-line); border-radius:4px;
padding:12px 14px; width:100%; transition:border-color .16s;
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.55; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--band-muted); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent-bright); outline:2px solid var(--accent-bright); outline-offset:1px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--band-muted); opacity:.75; }
.field select{ appearance:none; background-image:none; }
.field select option{ background:var(--band-2); color:var(--band-ink); }
.err{ font-size:13.5px; color:var(--accent-bright); min-height:0; }
.err:empty{ display:none; }
.field--bad input, .field--bad select, .field--bad textarea{ border-color:var(--accent-bright); }
.consent{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; margin-top:4px; }
.consent input{ width:17px; height:17px; margin-top:4px; accent-color:var(--accent); flex-shrink:0; }
.consent label{
font-family:var(--font-body); font-size:14.5px; text-transform:none; letter-spacing:0;
color:var(--band-muted); line-height:1.5;
}
.consent a{ color:var(--accent-bright); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formstate{
border:1px solid var(--accent-bright); border-left-width:3px; border-radius:4px;
background:var(--band-2); padding:16px 18px; font-size:15px; color:var(--band-ink); line-height:1.55;
}
.formstate:empty{ display:none; }
/* Trois etats, distingues par la couleur du filet gauche ET par le texte :
la couleur seule ne suffit pas (WCAG 1.4.1). */
.formstate--ok{ border-color:#5FBF7F; border-left-color:#5FBF7F; }
.formstate--bad{ border-color:#FF9A8B; border-left-color:#FF9A8B; }
.formstate a{ color:var(--accent-bright); }
/* Le bouton de l appel a l action de l accueil est centre a la demande du
client : pose a gauche dans une bande pleine largeur, il paraissait perdu.
Le texte au-dessus reste aligne a gauche, il se lit mieux ainsi. */
/* max-width:none : les sont plafonnes a 65ch pour le confort de
lecture, et le centrage se serait fait dans cette boite-la, pas sur
la largeur de la bande. Le bouton se retrouvait 50 px trop a gauche. */
.contact-cta{ text-align:center; max-width:none; }
/* Coordonnees au point d intention : a cote du bouton de l accueil et
au-dessus du formulaire. Le pied de page ne suffit pas, il faut faire
defiler pour l atteindre. */
.reach__intro{ margin:34px 0 14px; color:var(--band-muted); font-size:15px; }
/* Flex et non grid : avec trois elements, une grille auto-fit sur deux
colonnes laisse une quatrieme cellule vide, visible parce que le fond du
conteneur sert de filet. En flex, le troisieme s etire sur la ligne. */
.reach{
display:flex; flex-wrap:wrap; gap:1px; background:var(--band-line);
border:1px solid var(--band-line); border-radius:4px; overflow:hidden;
max-width:760px;
}
.reach li{ flex:1 1 210px; background:var(--band-2); padding:16px 18px; display:grid; gap:5px; align-content:start; }
.reach__lab{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-bright); }
.reach a{ color:var(--band-ink); text-decoration:none; font-family:var(--font-title); font-weight:600; font-size:15.5px; overflow-wrap:anywhere; }
.reach a:hover{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
/* Coordonnees */
.coords{ display:grid; gap:1px; background:var(--band-line); border:1px solid var(--band-line); border-radius:4px; overflow:hidden; }
.coords > div{ background:var(--band-2); padding:18px 20px; display:grid; gap:6px; }
.coords dt, .coords h3{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--band-muted); }
.coords dd, .coords p{ margin:0; font-size:15.5px; color:var(--band-ink); }
.mailrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mailrow code{ font-family:var(--font-mono); font-size:14.5px; color:var(--accent-bright); user-select:all; }
/* ===========================================================
16. MENTIONS LEGALES
=========================================================== */
.legal{ display:grid; gap:10px; max-width:900px; margin-top:34px; }
.legal details{ background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:var(--card-shadow); }
.legal summary{
cursor:pointer; list-style:none; padding:16px 52px 16px 22px; position:relative;
font-family:var(--font-title); font-weight:600; font-size:16.5px;
}
.legal summary::-webkit-details-marker{ display:none; }
.legal summary::after{
content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
font-family:var(--font-mono); font-size:17px; color:var(--accent-ink); line-height:1;
}
.legal details[open] summary::after{ content:"\2212"; }
.legal__body{ padding:0 22px 22px; display:grid; gap:14px; }
.legal__body p, .legal__body li{ font-size:15px; color:var(--muted); max-width:78ch; }
.legal__body h3{ color:var(--ink); margin-top:4px; font-size:16.5px; }
.legal__body ul{ display:grid; gap:7px; padding-left:18px; list-style:disc; }
.legal__body dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0; font-size:15px; }
.legal__body dt{ font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.legal__body dd{ margin:0; color:var(--ink); }
/* ===========================================================
17. PIED DE PAGE
=========================================================== */
.ftr{ background:var(--band); color:var(--band-muted); padding:0 0 28px; border-top:2px solid var(--accent); }
.ftr h3, .ftr__h{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-bright); margin-bottom:14px; }
.ftr ul{ display:grid; gap:9px; }
.ftr a:not(.btn):not(.brand){ color:var(--band-muted); text-decoration:none; font-size:15px; }
.ftr a:not(.btn):not(.brand):hover{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
.ftr p{ font-size:14.5px; line-height:1.6; }
/* Signature de marque : une ligne, courte, en or, sous la phrase de
presentation. Elle donne au bloc marque le point fort qui lui
manquait, et pose une hierarchie franche dans un pied jusque-la tout
en petits gris. C est le slogan de BURSENMA (pas de mention GRACE) :
la regle « la phrase de marque ne parle que de BURSENMA » tient. */
/* .ftr p (0,1,1) battait .ftr__slogan (0,1,0) : meme piege de specificite
que .caps__lab. D ou .ftr p.ftr__slogan. */
.ftr p.ftr__slogan{ font-family:var(--font-title); font-weight:700; font-size:18px;
line-height:1.25; color:var(--accent-bright); margin:2px 0 0; max-width:20ch; }
/* Marqueur de lien sortant. Le visiteur sait qu il quitte le site avant de
cliquer. Les lecteurs d ecran ont deja la mention "(nouvel onglet)" en
texte masque : le marqueur ne s adresse qu aux voyants, c est pourquoi il
est en pseudo-element et non dans le texte. */
a[target="_blank"]:not(.brand)::after{
content:"\2197"; margin-left:.3em; font-size:.85em; line-height:1;
}
/* ===========================================================
18. RUPTURES
=========================================================== */
/* Le CTA d en-tete cede la place avant la navigation :
sa version anglaise est nettement plus longue que la francaise. */
@media (max-width:1260px){
.hdr .btn--primary{ display:none; }
}
@media (max-width:1100px){
.sec{ padding:68px 0; }
.nav{
display:none; position:absolute; left:0; right:0; top:100%;
flex-direction:column; align-items:stretch; gap:0;
background:var(--band); border-bottom:1px solid var(--band-line);
padding:8px var(--gut) 18px; max-height:calc(100vh - 68px); overflow-y:auto;
}
.nav.is-open{ display:flex; }
/* Sans JavaScript le burger ne peut rien ouvrir : la navigation reste depliee. */
.no-js .nav{ display:flex; position:static; max-height:none; border-bottom:0; padding:0 0 12px; }
.no-js .burger{ display:none; }
.nav a{ padding:13px 4px; font-size:16px; border-bottom:1px solid var(--band-line); border-radius:0; }
.nav a:last-child{ border-bottom:0; }
.hdr__in{ position:relative; }
.burger{ display:block; }
.hdr .btn--primary{ display:none; }
/* Le texte passe pleine largeur : le voile ne peut plus s alleger a droite.
Il devient vertical, leger en haut (le plan respire), opaque en bas ou
le texte vient se poser. */
.hero__stage{ min-height:clamp(400px, 66vh, 520px); align-items:flex-end; padding:76px 0 42px; }
.hero__in > *{ max-width:none; }
.hero__media::after{
background:linear-gradient(to bottom,
rgba(9,23,52,.10) 0%, rgba(9,23,52,.20) 24%,
rgba(9,23,52,.76) 40%, rgba(9,23,52,.82) 100%);
}
.pos__grid{ grid-template-columns:1fr; gap:16px; }
.poles, .steps, .clients{ grid-template-columns:repeat(2,1fr); }
.agro__grid{ grid-template-columns:1fr; gap:38px; }
.duo, .group{ grid-template-columns:1fr; }
.cta-box{ grid-template-columns:1fr; }
}
@media (max-width:760px){
:root{ --gut:18px; }
body{ font-size:16.5px; }
.tools{ gap:7px; }
.hdr__in{ gap:12px; }
.lang button{ padding:7px 8px; }
.brand__name{ font-size:14.5px; }
.sec{ padding:56px 0; }
.sec-head{ margin-bottom:34px; }
.caps__row{ height:52px; }
.caps__row li{ font-size:13.5px; }
.caps__row li.caps__lab{ margin-left:26px; padding-left:26px; }
.caps__pause{ height:52px; padding-left:38px; background:linear-gradient(90deg, rgba(15,34,71,0) 0, var(--band-2) 28px); }
.caps__pause::before{ left:28px; }
.poles, .steps, .clients, .pledges{ grid-template-columns:1fr; }
/* Les deux appels a l action restent cote a cote : largeurs egales,
le libelle le plus long passe sur deux lignes plutot que le bouton en dessous. */
/* Sur-titre du hero sur une seule ligne, comme demande. 60 caracteres en
capitales ne tiennent pas a 12 px. Mesure : a cet interlettrage la chaine
occupe 38,5 fois la taille de police en pixels, et la place disponible
vaut la largeur d ecran moins les deux gouttieres de 18 px. D ou
2,55vw - 0,95px, qui laisse une marge a chaque largeur de 401 a 760 px.
Un simple 2,75vw la faisait deborder de 59 px sur un ecran de 390. */
.hero .kicker{
white-space:nowrap; letter-spacing:.04em;
font-size:clamp(9px, calc(2.55vw - 0.95px), 12.5px);
}
.hero__cta{ flex-wrap:nowrap; gap:10px; }
.hero__cta .btn{ flex:1 1 0; min-width:0; padding:12px 12px; font-size:14.5px; line-height:1.25; text-align:center; }
.field--row{ grid-template-columns:1fr; }
.sheet__row{ grid-template-columns:92px 1fr; gap:10px; }
.cta-box{ padding:26px 22px; }
.duo__card, .group__card{ padding:24px 20px 26px; }
.legal__body dl{ grid-template-columns:1fr; gap:2px 0; }
.legal__body dt{ margin-top:8px; }
}
/* Ecrans de 320 px : l en-tete depassait de 14 px. Hors de la plage de test
du cahier (360-1920) mais ces appareils circulent encore sur le marche vise. */
@media (max-width:400px){
.hdr__in{ gap:8px; }
.tools{ gap:5px; }
.brand{ gap:8px; }
.brand__mark{ height:30px; padding:3px 5px; }
.brand__name{ font-size:13.5px; }
.brand__sub{ font-size:8.5px; letter-spacing:.14em; }
.lang{ padding:0 7px 0 8px; gap:5px; }
.lang select{ font-size:11px; padding:7px 13px 7px 0; }
.lang__globe{ width:13px; height:13px; }
.burger{ width:36px; height:34px; }
}
/* 382 px est la largeur exacte ou la ligne unique cede : a 9 px de corps,
le plancher en dessous duquel le sur-titre n est plus lisible, la chaine
mesure 347 px et il en reste 346 de disponibles. Un iPhone de 390 px
tient donc la ligne unique demandee ; en dessous, elle passe a deux. */
@media (max-width:382px){
.hero .kicker{ white-space:normal; font-size:10px; line-height:1.55; }
}
/* Tres petits ecrans : le theme suit la preference systeme,
le bouton de bascule cede la place a la navigation. */
@media (max-width:430px){
.brand__sub{ font-size:9px; letter-spacing:.16em; }
}
/* ===========================================================
19. MOUVEMENT REDUIT
=========================================================== */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
/* Le bandeau ne defile plus : il devient une bande que l on fait glisser
soi-meme. La seconde copie disparait, sinon la liste serait lue deux
fois par ceux qui la parcourent au doigt ou a la molette. */
.caps__track{ animation:none; transform:none; }
.caps__viewport{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
.caps__row + .caps__row{ display:none; }
.caps__pause{ display:none; }
}
/* ===========================================================
20. EMPLACEMENTS PHOTO (PH1 - PH4)
Le site est complet sans aucune image : chaque emplacement
se replie sur la bande bleu nuit + halo or.
=========================================================== */
.fig{ margin:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--surface-2); }
.fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.fig--portrait{ aspect-ratio:4/5; }
.fig--wide{ aspect-ratio:16/9; }
.band .fig{ border-color:var(--band-line); background:var(--band-2); }
.fig figcaption{
font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.1em;
text-transform:uppercase; color:var(--muted); padding:10px 14px; border-top:1px solid var(--line);
}
.band .fig figcaption{ color:var(--band-muted); border-top-color:var(--band-line); }
/* Etat vide : aucune photo fournie */
.fig.is-empty{
display:grid; place-items:center; padding:22px; text-align:center;
background:
repeating-linear-gradient(135deg, transparent 0 10px, rgba(210,159,60,.06) 10px 20px),
var(--surface-2);
border-style:dashed; border-color:var(--accent);
}
.band .fig.is-empty{
background:
repeating-linear-gradient(135deg, transparent 0 10px, rgba(247,200,97,.07) 10px 20px),
var(--band-2);
border-color:var(--accent-bright);
}
.fig.is-empty .ph{ white-space:normal; line-height:1.7; }
/* ===========================================================
21. EN-TETE DE PAGE SECONDAIRE (FAQ, mentions, confidentialite, CGV)
=========================================================== */
.pagehead{ background:var(--band); color:var(--band-ink); padding:56px 0 60px; position:relative; overflow:hidden; }
.pagehead::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(620px 300px at 82% 0%, rgba(210,159,60,.15), transparent 70%);
}
/* Pas de max-width ici. La classe cumulait .wrap (1180 px, marges
auto) et un plafond de 820 : la boite retrecie se centrait dans la
grande, et le H1 partait 180 px a droite de tous les H2 de la page.
La mesure de 820 reste, mais sur le titre, qui garde ainsi la
verticale des sections. */
.pagehead__in{ position:relative; display:grid; gap:16px; }
.pagehead .lead{ max-width:none; }
.pagehead h1{ font-size:clamp(30px,3.6vw,44px); }
.pagehead .lead{ color:var(--band-muted); }
/* Fil d Ariane */
.crumbs{ font-family:var(--font-mono); font-weight:500; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; list-style:none; margin:0; padding:0; }
.crumbs a{ color:var(--band-muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
.crumbs li[aria-current]{ color:var(--accent-bright); }
.crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--band-line); }
/* ===========================================================
22. PAGES DE TEXTE (mentions legales, confidentialite, CGV)
=========================================================== */
/* --mesure : la largeur de la colonne de lecture, en PIXELS et non
en ch. L unite ch se calcule sur la police de l element, et trois
corps cohabitent ici (16,5 px, 17 px herite, 11,5 px en mono) :
65ch y valait 533, 549 et 643 px, soit trois bords droits pour
une seule colonne. 533 px est exactement ce que valait 65ch a
16,5 px, la mesure qu avaient deja les paragraphes. */
/* Plus de plafond, ni sur le bloc ni sur la mesure : 533 px de texte
dans une page de 1140, le client le lit comme coupe, sur les trois
pages juridiques. --mesure vaut none : les regles qui s y accrochent
restent en place et deviennent inoperantes d un seul mot. Decision du
client, prise apres avertissement sur la longueur des lignes. */
.prose{ display:grid; gap:26px; --mesure:none; }
/* ... et aucun paragraphe DESCENDANT non plus : le p de l encadre .callout
gardait les 65ch de la regle generale, 533 px dans une boite de 1140. */
.prose p, .callout p{ max-width:none; }
.prose h2{ font-size:clamp(22px,2.2vw,27px); margin-top:14px; }
.prose h3{ font-size:17.5px; margin-top:8px; }
/* ul/ol/dl partagent le corps de texte des paragraphes : sans cela
l unite ch, qui se calcule sur la police de l ELEMENT, donne
549 px a une liste en 17 px contre 533 px a un paragraphe en
16,5 px. Seize pixels d ecart sur le bord droit, celui que le
regard suit en descendant la page. */
.prose p, .prose li,
.prose ul, .prose ol, .prose dl{ color:var(--muted); font-size:16.5px; }
/* Une liste de texte courant ne court pas plus large qu un
paragraphe. Sans ceci, les puces prenaient les 760 px de .prose
quand les paragraphes s arretaient a 65ch : 95 signes par ligne
contre 68, et un bord droit qui saute d un bloc a l autre.
LA MESURE EST SUR LA LISTE, PAS SUR SES ITEMS. Posee sur le li,
le retrait de puce (padding-left du ul) s ajoutait par-dessus et
le bord droit tombait 20 px plus loin que celui des paragraphes :
le defaut divise par quatre, pas supprime. Sur le ul, en
border-box, les 65ch comprennent le retrait et les deux bords
droits coincident. */
/* dl EST EXCLU, et ce n est pas un oubli. Le dl.idcard des mentions
legales est un tableau a deux colonnes, pas du texte courant : le
plafonner a la mesure de lecture reduisait la colonne des valeurs
a 270 px et brisait "[FORME JURIDIQUE EXACTE APRES CONSTITUTION]"
sur trois lignes. Une mesure de lecture s applique au texte
courant ; les blocs de donnees appariees ont leur propre largeur,
comme .callout. */
.prose > p, .prose ul, .prose ol,
.prose dd, .prose__updated{ max-width:var(--mesure); }
.prose strong{ color:var(--ink); }
.prose ul{ display:grid; gap:9px; padding-left:20px; list-style:disc; }
.prose ul li::marker{ color:var(--accent-ink); }
.prose a{ color:var(--accent-ink); text-underline-offset:3px; }
.prose__updated{
font-family:var(--font-mono); font-weight:500; font-size:11.5px; letter-spacing:.1em;
text-transform:uppercase; color:var(--muted);
border-top:1px solid var(--line); padding-top:18px; margin-top:8px;
}
.idcard{
display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:0;
background:var(--surface); border:1px solid var(--line); border-radius:4px;
box-shadow:var(--card-shadow); padding:24px 26px;
}
.idcard dt{
font-family:var(--font-mono); font-weight:500; font-size:11.5px; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted); padding-top:3px;
}
.idcard dd{ margin:0; color:var(--ink); font-size:16px; }
.callout{
border-left:3px solid var(--accent); background:var(--surface-2);
padding:18px 22px; border-radius:0 4px 4px 0;
}
.callout p{ color:var(--ink); font-size:16px; }
/* ===========================================================
23. PIED DE PAGE - BLOC CONTACT
Quatre colonnes alignees sur une meme ligne de base : chaque
colonne est une grille dont le titre occupe une hauteur fixe.
=========================================================== */
/* Colonne contact : libelle au-dessus, valeur en dessous, pas de decalage */
/* 1. Marque et coordonnees, a parts egales. Les coordonnees ne sont plus
une colonne parmi quatre : c est ce que les visiteurs cherchent. */
.ftr__main{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:40px; padding:52px 0 40px; border-bottom:1px solid var(--band-line); }
.ftr__brand{ display:grid; align-content:start; gap:16px; }
.ftr__brand .brand{ margin-right:0; }
.ftr__coords{ display:grid; align-content:start; }
/* Une colonne = un titre, puis une liste d items identiques. Deux niveaux,
pas trois : les libelles en mono qui precedaient chaque valeur (EMAIL,
TELEPHONE, SIEGE, HEURES) ont ete supprimes. Une adresse email ressemble
a une adresse email, et le titre de colonne dit deja qu il s agit du
contact du siege. */
.ftr__list{ display:grid; gap:12px; }
.ftr__list li{ font-size:15px; line-height:1.5; color:var(--band-ink); }
.ftr__hint{ color:var(--band-muted); font-size:13.5px; }
/* Specificite alignee sur `.ftr a:not(.btn):not(.brand)` (0,2,0), sinon la
couleur grise du pied l emporte et l or ne s applique pas. */
.ftr .ftr__list a:not(.btn){ color:var(--accent-bright); font-size:15px; text-decoration:none; }
.ftr .ftr__list a:not(.btn):hover{ text-decoration:underline; text-underline-offset:3px; }
/* L email garde le mono : c est une adresse technique, elle se relit
caractere par caractere. */
.ftr__list li:first-child a{ font-family:var(--font-mono); font-size:14px; }
/* La representation est la troisieme colonne, avec son propre
au meme
rang que "Contact". Meme principe : un titre, puis une liste. Chaque pays
empile son nom, son adresse et son numero. */
.rep{ display:grid; gap:16px; }
.rep li{ display:grid; gap:2px; align-content:start; font-size:14px; line-height:1.5; }
.rep b{ font-family:var(--font-title); font-weight:600; color:var(--band-ink); font-size:14.5px; }
.rep > li > span{ color:var(--band-muted); }
.ftr .rep a:not(.btn){ color:var(--accent-bright); font-size:14px; text-decoration:none; }
.ftr .rep a:not(.btn):hover{ text-decoration:underline; text-underline-offset:3px; }
/* Les placeholders occupent toute la largeur de la colonne : les bords
restent alignes entre eux tant que les vraies valeurs ne sont pas saisies. */
/* 2. Liens d information en lignes libres. "Nous contacter" y figure :
c est le seul endroit du pied ou la page contact apparait en toutes
lettres. La rangee de navigation qui la portait a ete retiree — elle
recopiait les quatre entrees d un en-tete collant, visible jusqu en
bas de page. Ne pas la reintroduire. */
.ftr__legal{ display:flex; flex-wrap:wrap; gap:12px 30px; padding:24px 0; border-bottom:1px solid var(--band-line); }
.ftr__legal a:not(.brand){ font-size:14.5px; }
/* 3. Barre basse */
.ftr__bottom{
padding-top:24px; display:flex; flex-wrap:wrap; gap:10px 28px;
justify-content:space-between; align-items:center; font-size:13.5px;
}
.ftr__bottom p{ margin:0; }
@media (max-width:1100px){
}
@media (max-width:760px){
/* Sur mobile, la marque occupe toute la largeur et les trois categories
restent cote a cote : Navigation | Informations | Contact.
La typographie est resserree pour que trois colonnes tiennent a 360 px. */
/* La marque passe pleine largeur ; contact et representation restent
cote a cote, les empiler ferait defiler pour rien. */
.ftr__main{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 24px; padding:28px 0; }
.ftr__brand{ grid-column:1 / -1; }
.ftr__legal{ gap:10px 20px; padding:20px 0; }
.ftr__legal a:not(.brand){ font-size:13px; }
.ftr__h{ font-size:10px; letter-spacing:.09em; margin-bottom:12px; padding-bottom:8px; }
.ftr a:not(.btn):not(.brand){ font-size:13px; }
.ftr__list{ gap:10px; }
.ftr__list li, .ftr .ftr__list a:not(.btn){ font-size:13.5px; }
.rep li{ font-size:13px; }
.rep b{ font-size:13.5px; }
.pagehead{ padding:40px 0 44px; }
.idcard{ grid-template-columns:1fr; gap:2px; padding:20px 18px; }
.idcard dt{ margin-top:12px; }
.idcard dt:first-child{ margin-top:0; }
.ftr__bottom{ justify-content:flex-start; }
}
/* ===========================================================
24. RESUME DES POLES (accueil) + LIEN EXTERNE
=========================================================== */
.poles-short{
display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
background:var(--line); border:1px solid var(--line); border-radius:4px;
overflow:hidden; box-shadow:var(--card-shadow);
}
.poles-short li{
background:var(--surface); padding:20px 22px;
display:grid; gap:7px; align-content:start;
font-family:var(--font-title); font-weight:600; font-size:16.5px; line-height:1.32;
}
.poles-short .pole__ref{ font-size:11px; }
.sec-more{ margin-top:26px; max-width:none; }
.pole__ext{
margin-top:6px; padding-top:12px; border-top:1px solid var(--line-soft);
font-size:14.5px; color:var(--muted);
}
.extlink{
display:inline-flex; align-items:baseline; gap:3px;
font-family:var(--font-title); font-weight:600; color:var(--accent-ink);
text-decoration:underline; text-underline-offset:3px;
}
.extlink:hover{ color:var(--ink); }
/* ===========================================================
25. VISION, DIRIGEANTS, ETATS VIDES, SUJETS
=========================================================== */
/* Le slogan ferme la section vision. Il n est pas dans l encadre : c est
une signature, pas une phrase de l enonce. */
.slogan{
margin-top:28px; /* pleine largeur, comme les chapeaux */
font-family:var(--font-title); font-weight:700;
font-size:clamp(17px, 2.1vw, 22px); line-height:1.35;
color:var(--accent-bright); text-wrap:balance;
}
/* Une phrase par ligne. Sur PC le slogan se coupait apres « Contribuer »,
qui restait pendu en fin de ligne, arrache a sa propre phrase.
text-wrap:balance n y pouvait rien : il egalise la longueur des lignes,
il ne sait pas qu une signature en deux phrases se coupe entre les
deux. Sur mobile la seconde phrase se replie d elle-meme, ce qui est
naturel. */
.slogan__l{ display:block; }
/* Les quatre valeurs. Volontairement differentes des engagements qui les
suivent : filet or en haut plutot que carte encadree, intitule en
capitales. Les deux blocs se touchent et partagent le meme fond blanc ;
ils doivent se lire comme un enchainement, pas comme deux listes
interchangeables. */
/* Deux colonnes, plus quatre : 257 px par valeur hachaient le texte en
lignes de six mots, et le client lisait cela comme un texte coupe.
Avec le developpement, chaque valeur est un vrai bloc de lecture. */
.values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 48px; }
.values li{
display:grid; gap:9px; align-content:start;
border-top:2px solid var(--accent); padding-top:16px;
}
.values__no{
font-family:var(--font-mono); font-weight:500; font-size:11px;
letter-spacing:.13em; color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
.values h3{ font-size:17px; letter-spacing:.03em; text-transform:uppercase; }
.values p{ font-size:16px; color:var(--muted); line-height:1.62; max-width:none; }
.values__def{ color:var(--ink); font-size:16.5px; }
.values__dev strong{ color:var(--ink); font-weight:600; }
.values__dev + .values__dev{ margin-top:2px; }
.visionbox{
background:var(--band-2); border:1px solid var(--band-line); border-left-width:3px;
border-left-color:var(--accent-bright); border-radius:0 4px 4px 0;
padding:28px 30px; display:grid; gap:16px;
}
/* La premiere phrase est l enonce de la vision : c est elle qui doit etre la
plus lisible. La regle generale `.band .lead` la rendait grise et laissait
le paragraphe suivant en blanc, soit l inverse de la hierarchie voulue.
Meme specificite, mais plus bas dans la feuille : celle-ci l emporte. */
.visionbox .lead{ color:var(--band-ink); }
.visionbox p:not(.lead){ color:var(--band-muted); }
/* Releve fait sur le DOM a 1440 px : la regle generale p{max-width:65ch}
bridait encore quatre blocs a l interieur de leur boite - l enonce de
la vision (614 px dans 1080), la note de la fiche d operation (404
dans 530), le texte de l operation type et les cartes du groupe.
Un texte plus etroit que sa boite, sur PC, est lu comme coupe. */
.visionbox p, .sheet__note, .optype__texte p, .group__card p{ max-width:none; }
/* Le developpement de la vision : une introduction, quatre axes en
deux colonnes, une conclusion, puis le slogan. L encadre n a plus
de plafond : sur PC, 820 px au milieu de 1140 pliaient l enonce en
trois lignes et le client le lisait comme un texte coupe. Les
paragraphes courants gardent une mesure de 820 px. */
.vision__intro, .vision__fin,
.mission__intro, .mission__fin,
.values__intro, .values__fin, .pledges__fin,
.group__intro, .group__fin, .showroom__intro, .showroom__fin{ margin-top:36px; display:grid; gap:14px; }
.vision__intro p, .vision__fin p{ color:var(--band-muted); font-size:17px; max-width:none; }
.vision__intro em{ font-style:normal; color:var(--band-ink); font-weight:600; }
.vision__axes, .mission__axes, .group__axes, .showroom__axes{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 48px;
margin:44px 0 0; padding:0; list-style:none;
}
.vision__axe, .mission__axe, .group__axe, .showroom__axe{
display:grid; gap:10px; align-content:start;
border-top:2px solid var(--accent-bright); padding-top:18px;
}
.vision__no, .mission__no, .group__no, .showroom__no{
font-family:var(--font-mono); font-weight:500; font-size:11px;
letter-spacing:.13em; color:var(--accent-bright); font-variant-numeric:tabular-nums;
}
.vision__axe h3{ font-size:19px; color:var(--band-ink); }
.vision__axe p{ font-size:16px; line-height:1.62; color:var(--band-muted); max-width:none; }
.vision__axe p + p, .mission__axe p + p,
.group__axe p + p, .showroom__axe p + p{ margin-top:2px; }
.vision__fin, .mission__fin, .values__fin, .pledges__fin,
.group__fin, .showroom__fin{ margin-top:44px; }
/* Trois axes et non quatre : trois colonnes au-dessus de 1100 px, une
seule en dessous - trois colonnes de 300 px hacheraient le texte. */
.axes--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 40px; }
@media (max-width:1100px){
.axes--3{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:760px){
.vision__axes, .mission__axes, .group__axes, .showroom__axes{ grid-template-columns:1fr; gap:28px; }
}
/* La mission, meme patron sur fond clair : l encadre reprend celui de
la vision en blanc, et les couleurs passent a l encre et a l or
lisible sur clair (--accent-ink, 6,36:1). Le titre etait dans la
colonne gauche de .pos__grid : 546 px pour un H2 de 90 signes,
quatre lignes en face de deux paragraphes - « coupe » sur PC. */
.missionbox{
background:var(--surface); border:1px solid var(--line); border-left-width:3px;
border-left-color:var(--accent); border-radius:0 4px 4px 0; box-shadow:var(--card-shadow);
padding:28px 30px; display:grid; gap:14px;
}
.missionbox .lead{ color:var(--ink); font-size:19px; max-width:none; }
.missionbox p:not(.lead){ color:var(--muted); font-size:17px; max-width:none; }
.mission__intro p, .mission__fin p,
.values__intro p, .values__fin p, .pledges__fin p,
.group__intro p, .group__fin p, .showroom__intro p, .showroom__fin p{ color:var(--muted); font-size:17px; max-width:none; }
/* L introduction des valeurs precede la grille : elle porte la marge
du bas, pas celle du haut, qui appartient a .sec-head. */
.values__intro{ margin:-10px 0 36px; }
.mission__intro em{ font-style:normal; color:var(--ink); font-weight:600; }
.mission__axe, .group__axe, .showroom__axe{ border-top-color:var(--accent); }
.mission__no, .group__no, .showroom__no{ color:var(--accent-ink); }
.mission__axe h3, .group__axe h3, .showroom__axe h3{ font-size:19px; color:var(--ink); }
.mission__axe p, .group__axe p, .showroom__axe p{ font-size:16px; line-height:1.62; color:var(--muted); max-width:none; }
/* Le second paragraphe des cartes du groupe : ce que l entite fait et
ne fait pas. Meme corps que le premier, qui est le texte du cahier. */
.group__more{ max-width:none; }
/* Deux dirigeants, donc deux colonnes. Avec repeat(3,1fr) les deux
cartes se seraient serrees a gauche en laissant un tiers de page
vide a droite. En ajouter un troisieme un jour : repasser a 3. */
/* Une fiche par rangee, portrait a gauche, texte a droite.
Sur PC les biographies sont ouvertes (site.js, section 8). Deux
colonnes de 425 px y logeaient sept paragraphes en 14,5 px sous un
portrait de 531 : 1547 px de haut, du texte hache en lignes
courtes. Le portrait passe a 300 px et le texte prend une mesure de
640 px - celle des chapeaux de section, a 20 px pres - sur la meme
verticale que tout le reste de la page.
Le portrait couvre les quatre rangees du texte (titre, fonction,
resume, biographie) : `span 4` cree les pistes implicites qu il
faut, la ou `1 / -1` ne compterait que les pistes explicites. */
.people{ display:grid; grid-template-columns:1fr; gap:48px; }
.person{
display:grid; grid-template-columns:300px minmax(0,640px);
column-gap:40px; row-gap:10px; align-items:start;
}
.person .fig{ grid-column:1; grid-row:1 / span 4; margin-bottom:0; }
.person > :not(.fig){ grid-column:2; }
.person h3{ font-size:20px; }
.person__role{
font-family:var(--font-mono); font-weight:500; font-size:11.5px; letter-spacing:.1em;
text-transform:uppercase; color:var(--accent-ink);
}
.person p{ font-size:15.5px; color:var(--muted); max-width:none; }
.empty{
border:1px dashed var(--line); border-radius:4px; background:var(--surface-2);
padding:44px 40px; display:grid; gap:16px; max-width:820px; margin-inline:auto;
text-align:center; justify-items:center;
}
.empty h2{ font-size:clamp(22px,2.4vw,30px); }
.empty p{ color:var(--muted); font-size:16.5px; }
.empty .kicker{ margin-bottom:0; }
.empty__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }
.topics{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.topics li{
background:var(--surface); border:1px solid var(--line); border-radius:4px;
border-top:3px solid var(--accent); box-shadow:var(--card-shadow);
padding:22px 22px 24px; display:grid; gap:9px; align-content:start;
}
.topics h3{ font-size:17.5px; }
.topics p{ font-size:15px; color:var(--muted); }
@media (max-width:1100px){
.poles-short{ grid-template-columns:repeat(2,1fr); }
.people{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:880px; }
.person{ grid-template-columns:1fr; gap:10px; }
.person .fig{ grid-column:auto; grid-row:auto; margin-bottom:6px; }
.person > :not(.fig){ grid-column:auto; }
.person h3{ font-size:18px; }
.person p, .person__bio-txt p{ font-size:15px; }
.topics{ grid-template-columns:1fr; }
}
@media (max-width:760px){
.poles-short{ grid-template-columns:1fr; }
.people{ grid-template-columns:1fr; gap:30px; max-width:420px; }
.empty{ padding:32px 22px; }
.visionbox{ padding:22px 20px; }
}
/* Page courante dans la navigation */
.nav a[aria-current="page"]{ color:var(--band-ink); }
.nav a[aria-current="page"]::after{
content:""; display:block; height:2px; background:var(--accent-bright);
margin-top:5px; border-radius:1px;
}
@media (max-width:1100px){
.nav a[aria-current="page"]::after{ display:none; }
.nav a[aria-current="page"]{ color:var(--accent-bright); }
}
/* ===========================================================
26. RESEAUX SOCIAUX (pied de page)
Icone de marque + nom. Deuxieme et derniere exception a la regle
"pas d icones" du CLAUDE.md, apres le globe du selecteur de langue :
les logos de reseaux sont des reperes que rien ne remplace en texte seul.
=========================================================== */
/* Specificite alignee sur `.ftr ul` (0,1,1) via .ftr__brand, sinon la liste
herite de la grille verticale des colonnes de liens. */
/* justify-content:center a la demande du client. Les trois reseaux se
regroupent au milieu de la colonne de marque plutot que de partir du
bord gauche. */
.ftr__brand ul.social{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px; margin-top:2px; }
/* Pas de marqueur de lien sortant ici : trois fleches alignees sous la
marque font du bruit pour rien. La mention "(nouvel onglet)" en texte
masque reste, les lecteurs d ecran ne perdent rien. */
.social a[target="_blank"]::after{ content:none; }
.social li{ line-height:1; }
.social a{ display:inline-flex; align-items:center; gap:8px; }
.social svg{ width:16px; height:16px; flex-shrink:0; }
@media (max-width:760px){
.ftr__brand ul.social{ gap:10px 16px; }
.social a{ gap:7px; }
.social svg{ width:15px; height:15px; }
}
/* ===========================================================
27. UNE OPERATION TYPE (page A propos)
=========================================================== */
.optype{ display:grid; grid-template-columns:1fr .95fr; gap:52px; align-items:start; }
@media (max-width:1100px){
.optype{ grid-template-columns:1fr; gap:34px; }
}
/* ===========================================================
31. BULLE WHATSAPP BUSINESS
===========================================================
Bouton flottant present sur les 10 pages. Ouverture par case a cocher,
donc sans JavaScript, comme le bouton Pause du bandeau.
Le vert est celui de WhatsApp. C est la seule couleur hors palette du
site, et c est deliberé : un bouton de contact flottant ne sert que s il
est reconnu au premier coup d oeil. Le reste du site n en contient pas.
z-index 90 : sous l en-tete collant (100) pour ne jamais le recouvrir,
au-dessus du contenu. */
.wa{ position:fixed; right:20px; bottom:20px; z-index:90; }
.wa__cb{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); }
.wa__btn{
display:flex; align-items:center; justify-content:center;
width:56px; height:56px; border-radius:50%;
background:#128C4A; color:#FFFFFF; cursor:pointer;
box-shadow:0 4px 14px rgba(9,23,52,.28);
transition:background .18s, transform .18s;
}
.wa__btn svg{ width:30px; height:30px; }
.wa__btn:hover{ background:#0E7540; }
.wa__cb:focus-visible ~ .wa__btn{ outline:3px solid var(--accent); outline-offset:3px; }
/* Panneau : ferme par defaut, aucune animation d apparition (interdit § 6) */
.wa__panel{
position:absolute; right:0; bottom:70px; width:290px;
display:none; padding:20px 20px 18px;
background:var(--surface); color:var(--ink);
border:1px solid var(--line); border-radius:6px;
box-shadow:0 8px 28px rgba(9,23,52,.20);
}
.wa__cb:checked ~ .wa__panel{ display:block; }
.wa__title{ font-family:var(--font-title); font-weight:700; font-size:16px; margin-bottom:8px; padding-right:22px; }
.wa__msg{ font-size:14.5px; color:var(--muted); line-height:1.5; margin-bottom:14px; }
.wa__go{
display:block; text-align:center; text-decoration:none;
background:#128C4A; color:#FFFFFF;
font-family:var(--font-title); font-weight:600; font-size:15px;
padding:11px 16px; border-radius:4px;
}
.wa__go:hover{ background:#0E7540; }
/* Le numero est affiche en clair sous le bouton : sur un ordinateur sans
WhatsApp installe, le bouton ne menerait nulle part, et le visiteur
repartirait sans avoir de quoi nous joindre depuis son telephone. */
.wa__num{ margin-top:10px; font-size:12.5px; color:var(--muted); text-align:center; }
.wa__num a{ color:var(--accent-ink); text-decoration:none; font-weight:600; white-space:nowrap; }
.wa__num a:hover{ text-decoration:underline; text-underline-offset:3px; }
.wa__close{
position:absolute; top:6px; right:8px;
width:28px; height:28px; display:flex; align-items:center; justify-content:center;
font-size:22px; line-height:1; color:var(--muted); cursor:pointer; border-radius:4px;
}
.wa__close:hover{ color:var(--ink); background:var(--surface-2); }
@media (max-width:430px){
/* Sous 430 px tout s empile : deux colonnes ne laissaient plus assez de
place aux noms de pays ni a l email. Ce bloc est APRES la regle de base
et celle des 760 px, sinon il perd a specificite egale. */
.ftr__main{ grid-template-columns:1fr; gap:26px; }
.wa{ right:14px; bottom:14px; }
.wa__btn{ width:50px; height:50px; }
.wa__btn svg{ width:27px; height:27px; }
/* Le panneau se cale sur la largeur de l ecran moins les marges plutot
que de deborder a droite. */
.wa__panel{ width:calc(100vw - 28px); right:0; bottom:62px; }
}
/* Mouvement reduit : la transition du bouton disparait, le reste ne bouge pas. */
@media (prefers-reduced-motion: reduce){
.wa__btn{ transition:none; }
}
/* ===========================================================
32. VALEURS : RUPTURES
===========================================================
En fin de fichier a dessein. La regle de base `.values` vit dans les
composants, plus bas que le bloc responsive principal : ecrites la-haut,
ces deux regles etaient ecrasees a specificite egale et les quatre
colonnes debordaient de 59 px des 700 px de large.
Ne pas les remonter. */
@media (max-width:1100px){
.values{ grid-template-columns:repeat(2,1fr); gap:26px 24px; }
}
/* Une colonne des 760 px, et non 620 comme avant le developpement : deux
colonnes de 290 px pour des blocs de 150 mots hachent le texte, ce
qui etait supportable pour quatre phrases ne l est plus. */
@media (max-width:760px){
.values{ grid-template-columns:1fr; gap:28px; }
}
/* ===========================================================
33. POSITIONNEMENT : LES DEUX COLONNES FINISSENT ENSEMBLE
===========================================================
La figure portait un rapport 4:5 fixe : a 1440 px elle faisait 680 px de
haut contre 526 pour le texte, soit 154 px de decalage en bas de section.
Au-dessus de 1100 px elle prend donc la hauteur du texte, et le recadrage
centre (object-fit:cover, deja pose sur .fig img) s en charge.
Le rapport 4:5 reste en vigueur sous 1100 px, ou la figure passe sous le
texte et n a plus rien a egaler : sans lui elle n aurait plus de hauteur
du tout.
En fin de feuille a dessein : `.fig--portrait{ aspect-ratio:4/5 }` et
`.pos__grid{ align-items:start }` sont declares plus haut, et gagneraient
a specificite egale. Ne pas remonter ce bloc. */
@media (min-width:1101px){
.pos__grid{ align-items:stretch; }
/* position:absolute sur l image, c est la cle : sans cela elle garde sa
taille intrinseque (1120 x 1400) et c est ELLE qui fixe la hauteur de la
rangee. Le texte s etirait alors dans une boite de 680 px sans que rien
ne bouge a l ecran. Sortie du flux, l image ne pese plus rien : la
rangee est dimensionnee par le texte seul, et l image la remplit. */
.pos__grid .fig--portrait{ aspect-ratio:auto; height:100%; min-height:0; position:relative; }
.pos__grid .fig--portrait img{ position:absolute; inset:0; }
/* Plancher carre. Le texte anglais est plus court que le francais : sans
lui l image tombait a un rapport de 1,41, un bandeau ou 43 % de la photo
disparaissait, et la page n avait pas la meme allure selon la langue.
Ce cale-pied ne plafonne rien : si le texte depasse, la rangee grandit
et l image suit. */
.pos__grid .fig--portrait::before{ content:""; display:block; padding-top:100%; }
}
/* ===========================================================
34. SECTION CONTACT DE L ACCUEIL : RESSERREE
===========================================================
Elle faisait 538 px de haut pour un titre, trois lignes et un bouton,
dont 176 px de remplissage vertical. Elle n a plus de formulaire a
accueillir depuis que celui-ci vit sur contact.html : le rythme des
sections de contenu n a plus lieu de s y appliquer.
Deuxieme passe, a 291 px : le chapeau a ete supprime (il redisait ce
que la page dit plus haut, et contact.html le redit encore), et le H2
est descendu sous l echelle generale. Il ferme la page, il n ouvre pas
un developpement : il n a pas besoin du corps d un titre de section.
Ne pas y remettre de paragraphe. */
#contact.sec{ padding:40px 0 44px; }
#contact .sec-head{ margin-bottom:22px; }
#contact .sec-head h2{ font-size:clamp(23px, 2.3vw, 29px); }
@media (max-width:760px){
#contact.sec{ padding:34px 0 38px; }
#contact .sec-head{ margin-bottom:18px; }
}
/* ===========================================================
35. TEMOIGNAGES CLIENTS
===========================================================
Premiere version : la citation en 17 px, puis quatre lignes empilees
de poids voisin - nom, fonction, pays, operation. Le resultat se
lisait comme une fiche technique, pas comme une parole rapportee.
La hierarchie est donc franche : la citation est le seul element de
premier plan (18,5 px, interligne 1,62, couleur du texte courant),
l attribution passe sous un filet et descend a 14,5 px. C est ce
contraste qui fait lire le bloc comme un avis - pas le portrait rond,
le logo client ou le guillemet geant, que le SS 6 exclut.
Les guillemets sont dans le texte, pas en pseudo-element : ils font
partie de la citation, un lecteur d ecran doit les entendre. Ils sont
francais en FR, anglais en EN.
La ligne d operation reste en mono et en --accent-ink (6,36:1 sur
blanc) : c est le vocabulaire documentaire du SS 6, et c est elle qui
rend l avis recoupable. Elle ferme la carte, discrete mais presente.
Ne pas la supprimer pour alleger. */
.avis-liste{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.avis{
margin:0; padding:26px 24px 22px;
background:var(--surface); border:1px solid var(--line); border-radius:4px;
box-shadow:var(--card-shadow);
display:grid; grid-template-rows:auto 1fr auto; gap:16px 0;
}
/* La note ouvre la carte : c est elle qui fait reconnaitre un avis au
premier coup d oeil, avant meme d avoir lu.
Les etoiles sont en or de marque --accent #D29F3C, a la demande du
client. Cet or ne donne que 2,40:1 sur blanc, sous les 3:1 que la
WCAG 1.4.11 exige d un objet graphique porteur d information - mais
la note est ecrite en clair a cote, en --muted (5,80:1). L etoile
n est donc qu une redondance visuelle et la regle ne porte plus sur
elle. **Retirer la note chiffree en gardant les etoiles dorees ferait
repasser la section sous le seuil.**
Remplissage partiel : deux fois le meme dessin superpose, le creux en
--line, le plein en or, recoupe a --part par overflow:hidden. Un seul
sert les six cartes : six elements au lieu de trente, le
budget de page du SS 13 est preserve.
Le SVG est aria-hidden et double d un texte masque : un lecteur
d ecran ne lit pas une forme. */
.etoiles-def{ position:absolute; width:0; height:0; overflow:hidden; }
.avis__note{
margin:0; max-width:none;
display:flex; align-items:center; gap:9px;
}
.etoiles{ position:relative; display:block; width:78px; height:15px; flex:0 0 auto; }
.etoiles svg{ display:block; width:78px; height:15px; }
.etoiles__creux{ fill:var(--line); }
.etoiles__pleines{
position:absolute; inset:0 auto 0 0; width:var(--part,100%);
overflow:hidden; line-height:0;
}
.etoiles__pleines svg{ fill:var(--accent); }
.avis__chiffre{
font-family:var(--font-mono); font-weight:500; font-size:13px;
font-variant-numeric:tabular-nums; color:var(--ink);
}
.avis__sur{ color:var(--muted); }
.avis__cit{ margin:0; }
.avis__cit p{
margin:0; max-width:none;
font-size:18.5px; line-height:1.62; color:var(--ink);
}
.avis__qui{
display:grid; gap:3px;
padding-top:16px; border-top:1px solid var(--line-soft);
}
.avis__nom{
font-style:normal; font-family:var(--font-title); font-weight:600;
font-size:16px; color:var(--ink);
}
.avis__meta{ font-size:14.5px; line-height:1.45; color:var(--muted); }
.avis__ope{
margin-top:7px;
font-family:var(--font-mono); font-weight:500; font-size:12px; line-height:1.5;
letter-spacing:.01em; color:var(--accent-ink);
}
/* Les deux actions sous la liste : voir la suite, laisser un avis.
Contours dores et non fonds pleins - elles ne doivent pas rivaliser
avec "Decrire mon besoin", qui ferme la page juste apres. */
.avis-cta{ margin:26px 0 0; max-width:none; display:flex; flex-wrap:wrap; gap:12px; }
.avis-note{ margin:14px 0 0; font-size:14.5px; color:var(--muted); max-width:none; }
@media (max-width:1100px){
.avis-liste{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
.avis-liste{ grid-template-columns:1fr; gap:16px; }
.avis{ padding:22px 20px 20px; }
.avis__cit p{ font-size:17.5px; }
}
/* ===========================================================
36. OPERATION TYPE : LE TEXTE A LA HAUTEUR DE LA FICHE
===========================================================
A ecrire APRES le bloc .optype du SS 33, sinon align-items:start y
reprend le dessus a specificite egale. Ne pas remonter ce bloc.
La colonne faisait 181 px face a 398 px de fiche. Un simple
align-items:stretch aurait etire la boite sans deplacer le texte :
217 px de vide au milieu. Il a fallu d abord ecrire le paragraphe
qui manquait ; l etirement ne fait plus que repartir le reliquat.
space-between s ajoute au gap, il ne le remplace : 16 px restent le
minimum, sous 1101 px la colonne n est plus etiree et la propriete
n a plus d effet. */
.optype__texte{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:1101px){
.optype{ align-items:stretch; }
.optype__texte{ justify-content:space-between; }
}
/* ===========================================================
37. FENETRE « LAISSEZ UN AVIS »
===========================================================
Ouverture par case a cocher et selecteur :checked, comme la bulle
WhatsApp et le bouton Pause du bandeau. C est le seul mecanisme qui
tienne la contrainte du SS 2 : le site doit fonctionner sans
JavaScript, et une