/* ══════════════════════════════════════════════════════════════════════════ ACCUEIL — feuille de la page « / » Transcription de la maquette Claude Design « Accueil CBR-CLOUD ». LA MAQUETTE PORTE TOUT EN STYLE EN LIGNE : c'est un prototype que son éditeur visuel réécrit à chaque geste. Ici, la même chose en classes — mêmes valeurs, au pixel et à la couleur près, aux deux écarts documentés plus bas. Deux raisons de ne pas recopier les attributs `style=` : · le gabarit deviendrait illisible (chaque point de liste porte six déclarations, répétées vingt fois) ; · et surtout le JS bascule des états — onglets, accordéon, modale. Un script qui doit écraser un style en ligne finit par écrire `element.style.display = ''`, ce qui DÉTRUIT la mise en page au lieu de la rétablir. Ici il ne pose et ne retire que des classes et des attributs. Tout est préfixé `ac-` et vit sous `.ac` : la page est servie dans le gabarit public, à côté de Bootstrap 3, z-style.css, elements.css, fp-universal.css et fp-responsive.css. Rien ici ne doit fuir vers le reste du site, et rien du reste du site ne doit entrer sans qu'on l'ait voulu. ⚠️ CETTE FEUILLE A UN SECOND LECTEUR : /service/discord-bot (depuis le 26 septembre 2026). Cette page n'a pas de design à elle — elle emploie les boutons, le conteneur, le héros, le bandeau `.ac-infra`, la frise, l'accordéon et l'appel final d'ici, et public/service/discord-bot-style.css n'ajoute que ce que l'accueil n'a pas. Modifier un composant `ac-` le modifie donc AUSSI là-bas : c'est voulu, les deux pages doivent se ressembler. Relire /service/discord-bot après toute retouche de ces composants. ── CE QUI N'EST PAS REPRIS DE LA MAQUETTE, ET POURQUOI ──────────────────── L'EN-TÊTE. La maquette porte le sien — barre sombre de 72 px, sept entrées, menu hamburger. Le site en a déjà un, unique et partagé, dans partials/entete.blade.php. Ce fichier-là a justement été écrit le 27 août 2026 pour SUPPRIMER un second bandeau : deux balisages ne restent jamais d'accord, et le doublon s'était soldé par une barre de 76 px d'un côté, 96 px de l'autre, et une entrée de menu absente d'une des deux. On n'en repose pas un troisième. Conséquence directe sur les ancres : la maquette prévoyait `scroll-margin-top: 72px` sur chaque cible, sa barre faisant 72 px. Celle du site fait 88 px, 76 px puis 60 px selon la largeur — et includes/header.css pose DÉJÀ `html { scroll-padding-top }` aux trois valeurs. Ajouter ici une marge de 72 px s'ADDITIONNERAIT à cette réserve et ferait atterrir chaque ancre 72 px trop bas. Il n'y en a donc aucune. ── LES DEUX COULEURS QUI S'ÉCARTENT DE LA MAQUETTE ──────────────────────── Deux gris ne passaient pas le seuil AA (4,5:1 pour du texte de cette taille), mesuré sur les fonds réels : #66798F sur #F7FAFD 4,27 → #63758B 4,51 (onglets inactifs) #7A8AA5 sur #FFFFFF 3,50 → #69778F 4,53 (mentions du pied) Les proportions RVB sont conservées dans les deux cas : la teinte ne bouge pas, seule la luminance descend juste assez. Le premier est imperceptible ; le second se voit un peu, et c'est assumé — il portait la mention de droits d'auteur à un contraste de 3,50. Tout le reste du nuancier passe déjà, y compris les gris clairs sur fond sombre (7,16 à 14,83) et le bleu #1257F0 sur blanc (5,76). ══════════════════════════════════════════════════════════════════════════ */ /* LE FOND DU SITE EST SOMBRE — z-style.css pose `body { background: #181a1b }` et trois dégradés radiaux par-dessus. Cette page est CLAIRE : chacune de ses sections peint son propre fond, mais la moindre gouttière laisserait apparaître le noir du gabarit, et le pied de page repris de la maquette est blanc de bout en bout. Le fond est donc neutralisé ici, comme le faisait déjà la feuille de l'accueil précédente et comme le font /service/domaines et /service/web. La règle est globale et non préfixée : elle vise `body`, qui n'est pas sous `.ac` — et cette feuille n'est chargée que par cette page et par /service/discord-bot, qui veut le même fond blanc. */ body { background-color: #fff !important; background-image: none !important; } .ac { /* DM Sans pour le corps, Poppins pour les titres — voir la garde plus bas. La pile de repli reprend celle du reste du dépôt. */ font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #4C5F7D; background: #fff; letter-spacing: normal; /* LA TAILLE DE BASE EST CELLE DE LA MAQUETTE, PAS CELLE DU SITE. assets/css/fp-universal.css pose `body { font-size: 14px !important }` ; la maquette, elle, n'en pose aucune et hérite donc des 16 px du navigateur. Presque tout ici porte sa taille explicite, mais pas les conteneurs qui n'entourent qu'un lien ou un bouton : leur boîte de ligne suivait le 14 px du site et rendait ces blocs 3 px plus courts qu'à la maquette. Le `!important` d'en face vise `body` et ne peut rien contre une valeur posée ici, sur un autre élément. */ font-size: 16px; /* `normal`, ET PAS UNE VALEUR. C'est ce que la maquette emploie partout où elle ne dit rien : son ne pose aucun interligne. Le mesurer est le seul moyen de le savoir — `normal` vaut environ 1,3 pour DM Sans et 1,5 pour Poppins, là où le 1,5 uniforme que j'avais posé d'abord ajoutait 3 px à chaque ligne de texte courant. Relevé sur les deux rendus côte à côte : point de liste à 23 px de haut ici contre 20 px sur la maquette, sur vingt lignes de la page. Le site, lui, pose `body { line-height: 1.6 !important }` (assets/css/fp-universal.css) et `body { line-height: 1.5 }` (z-style.css) : les deux visent `body`, donc ils ne touchent pas `.ac`, qui reprend la main pour toute sa descendance. */ line-height: normal; /* PAS d'`overflow-x: hidden` ICI, et c'est délibéré. Il paraissait la façon évidente d'interdire le défilement horizontal, mais `overflow-x: hidden` posé avec un `overflow-y` resté `visible` fait calculer `overflow-y: auto` par le navigateur : `.ac` devenait un CONTENEUR DE DÉFILEMENT de 5 276 px de haut, avec tout ce que cela entraîne — une barre de défilement imbriquée, `position: sticky` qui se colle à lui plutôt qu'à la fenêtre, et un rendu qui se vide au défilement dans certains moteurs. Les deux seuls éléments qui sortent de leur cadre coupent déjà chez eux : la lueur du héros (`.ac-hero { overflow: hidden }`) et le tracé de l'appel final (`.ac-cta-bloc`). Vérifié à 320, 390, 768, 1024, 1280 et 1920 px : `scrollWidth` égale `clientWidth` partout. */ } .ac *, .ac *::before, .ac *::after { box-sizing: border-box; } /* ── LA POLICE, ET POURQUOI IL FAUT LA REDIRE ────────────────────────────── `.ac { font-family: 'DM Sans' }` ne suffit pas : la police ne se transmet que par HÉRITAGE, et l'héritage perd contre n'importe quelle règle qui vise l'élément. Or z-style.css, la feuille du site, pose body, h1, h2, h3, h4, h5, h6, a, p { font-family: 'Montserrat' } — cinq sélecteurs de TYPE. Sans la garde ci-dessous, ils reprennent la main sur le titre, tous les intertitres, tous les liens, tous les paragraphes, et sur les qu'ils contiennent par héritage à leur tour. Relevé en production le 27 août 2026 sur /solution-entreprise, page montée sans la garde : 260 éléments en Montserrat contre 747 dans la police voulue, et personne ne l'avait vu à l'œil — les deux polices sont proches. Ce n'est pas qu'esthétique : Montserrat est plus LARGE à taille égale. Le

de cette page-là passait de quatre à CINQ lignes. `:where()` ramène la règle à la spécificité de `.ac` seul, soit (0,1,0) : assez pour battre les sélecteurs de type de z-style.css, trop peu pour gêner une classe. Et comme elle vise les TYPES et non `*`, elle laisse tranquilles les icônes Font Awesome du reste du site, qui portent leur police par classe. DEUX RÈGLES ET NON UNE, parce que la page a deux polices : le corps hérite de `.ac`, les titres reprennent Poppins explicitement — un `inherit` posé sur h1..h6 les passerait en DM Sans. */ .ac :where(a, p, b, strong, em, li, label, blockquote, span, div, button) { font-family: inherit; } .ac :where(h1, h2, h3, h4, h5, h6) { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #0B1F44; margin: 0; letter-spacing: -0.02em; text-wrap: pretty; /* L'INTERLIGNE DES TITRES EST LE MÊME PIÈGE QUE LA POLICE, avec un autre coupable : Bootstrap 3, que le gabarit public charge, pose .h1, .h2, ..., h1, h2, h3, h4, h5, h6 { line-height: 1.1 } Un sélecteur de TYPE, donc (0,0,1) — et l'héritage depuis `.ac` ne pèse rien contre lui. Sans cette ligne, TOUS les intertitres de la page étaient serrés à 1,1 au lieu du `normal` de la maquette : mesuré côte à côte, « Premier échange » faisait 20 px de haut ici contre 27 sur la maquette, « Des engagements concrets » 24 contre 33. Sur deux lignes, l'écart double. */ line-height: normal; } /* LA MISE À ZÉRO DES MARGES DE PARAGRAPHE PASSE PAR :where(), ET C'EST LE MÊME PIÈGE QUE POUR LA COULEUR DES LIENS, À UN CRAN PLUS SOURNOIS. Écrite `.ac p`, la règle pèse (0,1,1) — une classe PLUS un type. Elle bat donc `.ac-hero-texte`, `.ac-surtitre`, `.ac-ent-texte`, `.ac-modale-intro` et `.ac-livraison-lien`, qui ne pèsent qu'une classe : toutes leurs marges tombaient à zéro, silencieusement. Le symptôme ne ressemblait pas à sa cause. Les paragraphes restaient parfaitement en place — c'est le BLOC SUIVANT qui remontait contre eux. Mesuré côte à côte avec la maquette : colonne gauche du héros à 480 px de haut contre 577, section Entreprise à 412 contre 445, et le lien « Comprendre ce qui vous est remis » collé sous les trois colonnes au lieu d'être 28 px plus bas. On cherche alors une hauteur manquante ailleurs, pas une marge annulée ici. `:where()` ramène la règle à (0,1,0), le poids de `.ac` seul : assez pour battre le `p { margin: 0 0 10px }` de Bootstrap 3, trop peu pour gêner la moindre classe de cette feuille. */ .ac :where(p) { margin: 0; text-wrap: pretty; } /* LA COULEUR DES LIENS PASSE AUSSI PAR :where(), et pour une raison mesurée ailleurs dans ce dépôt : écrite `.ac a`, la règle pèse (0,1,1) — une classe plus un type. Elle battrait donc `.ac-btn` (0,1,0) et repeindrait en bleu le texte de TOUS les boutons qui sont des . Sur un bouton plein, dont le fond est ce même bleu, cela donne du bleu sur bleu : un rectangle vide, au contraste de 1,00. `:where()` remet la règle au poids d'un simple `a`. */ :where(.ac) a { color: #1257F0; text-decoration: none; } :where(.ac) a:hover, :where(.ac) a:focus { color: #0B44C4; text-decoration: none; } .ac ::selection { background: rgba(18, 87, 240, .18); } .ac ::placeholder { color: #9AA7BA; } .ac :focus-visible { outline: 2px solid #1257F0; outline-offset: 2px; border-radius: 4px; } /* `:where()` SUR CES DEUX RÈGLES POUR LA MÊME RAISON QUE SUR `p` PLUS HAUT, et celle-ci s'était déjà payée : écrite `.ac img`, la borne de largeur pèse (0,1,1) — une classe plus un type — et bat donc `.ac-eng-visuel` (0,1,0), qui plafonne le visuel du bloc Engagements à 410 px. Le défaut ne se voyait pas à la largeur de conception : la colonne du milieu y mesure justement 410 px, donc `max-width: 100%` donnait le même résultat. Il n'apparaissait qu'entre 1025 et 1180 px, où ce visuel passe pleine largeur — il s'affichait alors à 1026 px de côté, deux fois et demie sa taille. C'est la largeur à laquelle le client l'a vu. Les autres bornes d'image de cette feuille (`.ac-panneau-visuel img`, `.ac-transfert img`…) pèsent elles aussi (0,1,1) et sont déclarées PLUS BAS : à spécificité égale, l'ordre les fait gagner. Elles n'étaient donc pas touchées, ce qui rendait le défaut d'autant plus isolé. */ .ac :where(input, select, textarea, button) { font-family: inherit; } .ac :where(img) { max-width: 100%; } /* Masquage : l'ATTRIBUT plutôt qu'une classe, pour que le JS n'ait jamais à toucher element.style.display — voir l'en-tête. `hidden` est sans effet sur un élément qu'une feuille passe en `display:grid` ou `flex`, d'où le !important : c'est le seul moyen de le rendre fiable. */ .ac [hidden] { display: none !important; } .ac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════════════════════ TRAME COMMUNE ══════════════════════════════════════════════════════════════════════════ */ .ac-conteneur { max-width: 1240px; margin: 0 auto; padding: 0 32px; } .ac-conteneur--etroit { max-width: 1200px; padding: 0 24px; } /* POURQUOI CHAQUE COLONNE EST ÉCRITE `minmax(0, 1fr)` ET JAMAIS `1fr`. `1fr` est un raccourci pour `minmax(auto, 1fr)`, et ce `auto` est un plancher de CONTENU MINIMAL : la colonne refuse de descendre sous la largeur du plus long mot insécable qu'elle contient. À 320 px, la grille du bandeau infrastructure mesurait 280 px de large pour une colonne unique de 309 px — son titre débordait de 9 px, invisiblement, parce que le garde-fou `body { overflow-x: hidden }` du site (assets/css/fp-responsive.css, sous 991 px) le rattrapait sans rien signaler. `minmax(0, 1fr)` retire ce plancher : la colonne suit la grille, et c'est le contenu qui se réajuste. Le dépôt connaît déjà le défaut — il est décrit dans l'en-tête de la section « grilles de contenu » de fp-responsive.css, relevé sur /cgu-cgv. */ .ac-sec { padding: 88px 0; } /* ── BOUTONS ─────────────────────────────────────────────────────────────── Une seule base, quatre habillages. La hauteur est portée par `min-height` et non `height` : un libellé qui passe sur deux lignes à 320 px doit agrandir le bouton, pas déborder de lui. */ .ac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .ac-btn--sm { min-height: 48px; } .ac-btn--plein { background: #1257F0; color: #fff; } .ac-btn--plein:hover, .ac-btn--plein:focus { background: #0B44C4; color: #fff; } .ac-btn--vif { background: #0B63F6; color: #fff; border-radius: 11px; } .ac-btn--vif:hover, .ac-btn--vif:focus { background: #0A4FC6; color: #fff; } /* LE CONTOUR N'EST PAS SUR LA BASE, et ce n'est pas un détail : posé sur `.ac-btn` en `transparent`, il ajoutait 2 px de large à TOUS les boutons pleins, qui n'en ont pas dans la maquette — « Parler de mon projet » mesurait 199 px ici contre 197 là-bas, sur les six boutons pleins de la page. */ .ac-btn--clair { background: #fff; color: #1257F0; border: 1px solid #B9CDF6; } .ac-btn--clair:hover, .ac-btn--clair:focus { background: #F0F5FE; color: #1257F0; } /* Sur fond sombre : contour translucide, fond au survol. */ .ac-btn--fant { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .28); } .ac-btn--fant:hover, .ac-btn--fant:focus { background: rgba(255, 255, 255, .08); color: #fff; } /* ── LA HAUTEUR DES BOUTONS SUR TÉLÉPHONE, ET POURQUOI ELLE SE REDIT ICI ─── assets/css/fp-responsive.css relève les commandes à 40 px sous 768 px : .fpr-contenu a[class*="btn"]:not([data-fpr-garder]) { min-height: 40px } C'est un PLANCHER pour le reste du dépôt, où beaucoup de liens-boutons font moins. Ici c'en est un plafond : le sélecteur pèse (0,2,1) contre (0,1,0) pour `.ac-btn`, et la feuille est chargée APRÈS celle-ci — les boutons de la maquette passaient donc de 50 px à 40 sur téléphone, là où le cahier des charges demande 44 px de zone tactile au minimum. QUATRE SÉLECTEURS DE CLASSE, ET LE `:not()` EN FAIT PARTIE. C'est le détail qui m'a fait rater la cible du premier coup : `:not()` prend la spécificité de son argument, donc la règle d'en face pèse (0,3,1) et non (0,2,1). Reprendre le `:not([data-fpr-garder])` à l'identique porte celle-ci à (0,4,0), qui passe devant — et lui laisse au passage la même échappatoire. `.fpr-contenu` est le conteneur que layouts/app.blade.php pose autour du contenu ; la page vit dedans. Un `!important` aurait marché aussi, au prix d'une surenchère que la feuille d'en face devrait ensuite rattraper. */ .fpr-contenu .ac .ac-btn:not([data-fpr-garder]) { min-height: 50px; } .fpr-contenu .ac .ac-btn--sm:not([data-fpr-garder]) { min-height: 48px; } .fpr-contenu .ac .ac-modale-envoi:not([data-fpr-garder]) { min-height: 48px; } .fpr-contenu .ac .ac-faq-q:not([data-fpr-garder]) { min-height: 52px; } /* ── LIEN AVEC FLÈCHE ────────────────────────────────────────────────────── La flèche est une icône Lucide (ArrowRight), pas un caractère : « → » se lit « flèche vers la droite » par un lecteur d'écran, au milieu du libellé. */ .ac-lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; } .ac-lien-fleche svg { transition: transform 180ms ease; } .ac-lien-fleche:hover svg { transform: translateX(3px); } .ac-coche { flex: 0 0 auto; } /* ══════════════════════════════════════════════════════════════════════════ 1. HÉROS ══════════════════════════════════════════════════════════════════════════ */ .ac-hero { position: relative; overflow: hidden; background: linear-gradient(155deg, #0A1B3D 0%, #071227 60%, #050E1E 100%); } /* La lueur d'angle. `pointer-events:none` : elle couvre 620 px et passerait sinon devant le bouton « Parler de mon projet ». */ .ac-hero::before { content: ''; position: absolute; top: -140px; right: -120px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 87, 240, .20), transparent 65%); pointer-events: none; } .ac-hero .ac-conteneur { position: relative; } .ac-hero-inner { padding: 88px 0 96px; } /* LE PARTAGE PENCHE VERS L'IMAGE, ET LA GOUTTIÈRE SE RESSERRE. La maquette donne 0,92 / 1,08 et 64 px de gouttière, soit 511 px de texte et 600 d'image à 1240. Le client a demandé le visuel deux fois plus grand — 600 puis 673, puis 774 — et à 774 il ne restait plus assez de place à droite : il aurait été coupé au bord de la fenêtre. Plutôt que de le laisser déborder davantage, on lui donne la place : la gouttière passe de 64 à 48 px et le partage de 0,92/1,08 à 0,86/1,14. La colonne de texte perd 26 px — le titre casse déjà aux mêmes endroits, il n'y perd aucune ligne — et l'image en gagne 43, qui s'ajoutent à ce qu'elle pouvait déjà prendre sur la marge. */ .ac-hero-grille { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 48px; align-items: center; } .ac-surtitre { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #5B9BFF; margin-bottom: 20px; } .ac-hero-titre { font-size: clamp(36px, 3.6vw, 50px); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; color: #fff; margin-bottom: 22px; max-width: 640px; } .ac-hero-titre > span[aria-hidden] { display: block; } /* ── LA ZONE DU VERBE ────────────────────────────────────────────────────── `min-width: 12ch` réserve la place du plus long des cinq verbes (« accompagnons ») : sans elle, chaque changement redimensionne la ligne, ce qui décale « vos projets numériques. » et tout le contenu situé dessous. La largeur est FIXE, la rotation ne déplace rien. */ .ac-verbe { display: inline-block; min-width: 12ch; text-align: left; color: #2C7BF2; } @keyframes ac-verbe-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ac-verbe-mot { display: inline-block; animation: ac-verbe-entre 800ms cubic-bezier(.22, 1, .36, 1) both; } .ac-hero-texte { font-size: 17px; line-height: 1.65; color: #B7C6DE; max-width: 520px; margin-bottom: 32px; } .ac-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; } .ac-rassure { display: flex; align-items: center; gap: 8px; color: #8FA3C2; font-size: 13.5px; } .ac-rassure svg { flex: 0 0 auto; } .ac-hero-rassure { margin-bottom: 44px; } .ac-preuves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ac-preuve { padding-right: 20px; } .ac-preuve:last-child { padding-right: 0; } .ac-preuve + .ac-preuve { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .12); } .ac-preuve svg { margin-bottom: 12px; } .ac-preuve span { display: block; font-size: 14px; color: #DCE6F5; line-height: 1.45; } /* LE VISUEL DU HÉROS DÉBORDE DE SA COLONNE, ET C'EST VOULU. La maquette l'affiche à 673 px dans une colonne qui n'en fait que 600 : elle le laisse mordre sur la marge. Je l'avais d'abord bridé à la largeur de la colonne pour qu'il ne soit jamais rogné — au prix de 12 % de sa taille, ce qui se voit. `max-width` reprend donc la place réellement disponible À DROITE plutôt qu'une valeur fixe : la largeur de la colonne, plus le rembourrage du conteneur (32 px), plus la gouttière de page quand la fenêtre dépasse les 1240 px du conteneur. Le visuel atteint ses 673 px dès qu'il y a la place, et se contente de moins quand il n'y en a pas — au lieu d'être coupé. Mesuré : 774 px à 1440 et au-delà. Jamais de rognage, jamais de débordement horizontal — en dessous, la borne rend simplement la largeur disponible. */ .ac-hero-visuel { width: 774px; max-width: calc(100% + 32px + max(0px, (100vw - 1240px) / 2)); height: auto; display: block; } /* ══════════════════════════════════════════════════════════════════════════ 2. QUEL TYPE DE PROJET (#projets) ══════════════════════════════════════════════════════════════════════════ */ .ac-projets { background: #F7FAFD; border-bottom: 1px solid #E8EEF6; } .ac-projets-inner { padding: 52px 0 48px; } .ac-h2 { font-size: 34px; font-weight: 600; line-height: 1.2; } /* `.ac-h2` porte 1,2 parce que DEUX des trois titres de section l'ont dans la maquette. Celui-ci ne l'a pas : il revient à `normal`, soit 51 px de haut pour ses 34 px de corps, contre 41 avec 1,2. */ .ac-projets-titre { text-align: center; line-height: normal; margin-bottom: 30px; } /* La barre d'onglets défile horizontalement plutôt que de s'empiler : c'est la convention du dépôt pour un fil d'onglets (voir .fpr-defile dans assets/css/fp-responsive.css, dont la classe est posée sur cet élément), et cinq libellés ne tiennent pas sur 320 px. La barre de défilement est masquée, le geste reste possible, et le clavier atteint les onglets par les flèches. */ .ac-onglets { display: flex; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #DDE5F0; margin-bottom: 56px; scrollbar-width: none; -ms-overflow-style: none; } .ac-onglets::-webkit-scrollbar { width: 0; height: 0; } .ac-onglet { flex: 0 0 auto; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 26px; font-size: 15.5px; font-weight: 500; color: #63758B; /* maquette #66798F — voir l'en-tête (AA) */ white-space: nowrap; cursor: pointer; transition: color .15s; } .ac-onglet:hover { color: #1257F0; } .ac-onglet[aria-selected="true"] { font-weight: 600; color: #1257F0; border-bottom-color: #1257F0; } /* LA HAUTEUR DU PANNEAU EST RÉSERVÉE, ET LA RÉSERVE VIENT DE DEUX ENDROITS. 440 px est la valeur de la maquette. Elle suffit tant que le panneau tient sur deux colonnes : les cinq y font 324 à 429 px. Elle ne suffit plus dès que la page passe en une colonne, où le texte et l'image s'empilent : mesuré à 1024 px, les cinq panneaux font 648 à 793 px. Sans réserve, TOUT CE QUI SUIT LA SECTION remonte ou descend de 145 px à chaque rotation — c'est-à-dire toutes les dix secondes, sous les yeux de quelqu'un qui lit le bas de la page. Le défaut a été signalé par le client. Une valeur en dur ne peut pas convenir : cette hauteur dépend de la largeur de la fenêtre. C'est donc le script qui mesure les cinq panneaux et pose `--ac-panneau-reserve` — une propriété personnalisée, pas un `style.height`, pour que la feuille garde la main sur la règle. Sans JavaScript, on retombe sur les 440 px de la maquette. */ /* La premiere declaration est le repli : un moteur qui ne connait pas `max()` ecarte la seconde et garde les 440 px de la maquette. */ .ac-panneaux { min-height: 440px; min-height: max(440px, var(--ac-panneau-reserve, 0px)); } .ac-panneau { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } .ac-panneau-titre { font-size: 30px; font-weight: 600; line-height: 1.25; margin-bottom: 26px; } .ac-points { display: grid; gap: 15px; margin-bottom: 34px; } .ac-point { display: flex; gap: 12px; align-items: center; font-size: 15px; color: #3F5372; } /* QUATRE VISUELS SUR CINQ TIENNENT DANS LEUR COLONNE, ET C'EST LA MAQUETTE. La maquette leur donnait trois plafonds — 660, 680 et 700 px selon l'onglet — dont aucun ne mordait jamais : la colonne n'en fait que 644. Un seul plafond suffit donc à dire la même chose. SEUL « LOGICIEL » EST AGRANDI, et pour une raison qui n'est pas esthétique : son image est de loin la plus LARGE des cinq (1851 × 849 contre 1536 × 1024), donc la plus COURTE à largeur égale. À 644 px elle ne faisait que 295 px de haut quand les autres en font 429, et elle paraissait perdue au milieu de son cadre. Elle suit la même borne que le visuel du héros : la place réellement disponible à droite — la colonne, plus le rembourrage du conteneur, plus la gouttière de page — au lieu d'une valeur fixe qui la ferait couper sur un écran étroit. Mesuré : 776 px à 1440 (contre 644, soit +20 %) et 805 à 1920. Les quatre autres restent à 644, inchangées. */ .ac-panneau-visuel { display: flex; justify-content: center; } .ac-panneau-visuel img { width: 100%; max-width: 660px; height: auto; display: block; } .ac-panneau-visuel--logiciel img { width: 805px; max-width: calc(100% + 32px + max(0px, (100vw - 1240px) / 2)); } /* ── L'ANIMATION D'ENTRÉE DU PANNEAU ─────────────────────────────────────── SEULE LA COLONNE DE TEXTE S'ANIME ; l'image change instantanément. Ses trois blocs — titre, liste, boutons — entrent à 0, 130 et 260 ms ; le quatrième décalage est prévu pour un panneau qui porterait un bloc de plus. La classe est posée puis retirée par le script à chaque changement, avec un reflow entre les deux : sans ce reflow, le navigateur ne voit aucun changement d'état et ne rejoue pas l'animation. */ @keyframes ac-panneau-entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .ac-panneau.ac-anime > .ac-panneau-texte > * { animation: ac-panneau-entre 760ms cubic-bezier(.22, .61, .36, 1) both; } .ac-panneau.ac-anime > .ac-panneau-texte > *:nth-child(2) { animation-delay: 130ms; } .ac-panneau.ac-anime > .ac-panneau-texte > *:nth-child(3) { animation-delay: 260ms; } .ac-panneau.ac-anime > .ac-panneau-texte > *:nth-child(4) { animation-delay: 390ms; } /* ══════════════════════════════════════════════════════════════════════════ 3. UNE SOLUTION CONÇUE POUR VOTRE ENTREPRISE (#solutions) ══════════════════════════════════════════════════════════════════════════ */ .ac-entreprise { background: #F0F5FC; } .ac-ent-grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; } .ac-ent-titre { margin-bottom: 18px; } .ac-ent-texte { font-size: 16px; line-height: 1.65; margin-bottom: 30px; max-width: 380px; } .ac-ent-bouton { margin-bottom: 18px; } .ac-ent-liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px 40px; } .ac-arg { display: flex; gap: 14px; } .ac-arg-pastille { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; background: #DCE8FC; display: flex; align-items: center; justify-content: center; } .ac-arg h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .ac-arg p { font-size: 14.5px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════════════════ 4. UNE FOIS LIVRÉ, VOTRE PROJET VOUS APPARTIENT ══════════════════════════════════════════════════════════════════════════ */ .ac-livraison { background: #fff; } .ac-livraison .ac-surtitre { color: #1257F0; margin-bottom: 16px; } .ac-livraison-titre { max-width: 420px; margin-bottom: 56px; } .ac-transfert { margin-bottom: 56px; } .ac-transfert img { width: 100%; height: auto; display: block; } .ac-livr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #E8EEF6; padding-top: 36px; } .ac-livr-col { padding-right: 36px; } .ac-livr-col + .ac-livr-col { padding-left: 36px; border-left: 1px solid #E8EEF6; } .ac-livr-col:last-child { padding-right: 0; } .ac-livr-pastille { width: 36px; height: 36px; border-radius: 9px; background: #EAF1FE; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .ac-livr-col h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .ac-livr-col p { font-size: 14.5px; line-height: 1.6; } .ac-livraison-lien { margin-top: 28px; } /* ══════════════════════════════════════════════════════════════════════════ 5. LA MÊME ÉQUIPE, DU PREMIER ÉCHANGE À LA LIVRAISON ══════════════════════════════════════════════════════════════════════════ */ .ac-equipe { background: #fff; } .ac-equipe-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 88px; align-items: start; } .ac-equipe-titre { font-size: 42px; font-weight: 700; line-height: 1.15; max-width: 620px; } .ac-equipe-aparte { border-left: 1px solid #DCE6F2; padding-left: 40px; } .ac-equipe-aparte p { font-size: 17px; line-height: 27px; color: #44576F; max-width: 390px; } .ac-equipe-aparte .ac-btn { margin-top: 24px; } /* ── LA FRISE ────────────────────────────────────────────────────────────── Rail gris de 2 px allant du CENTRE de la première pastille au CENTRE de la dernière. Les pastilles font 40 px, leur centre est donc à 20 px du bord gauche de leur colonne ; la dernière colonne occupe un cinquième de la largeur, d'où `right: calc(20% - 20px)`. Le rail et la jauge sont DERRIÈRE les pastilles (z-index), et les pastilles sont opaques : la ligne ne traverse aucun pictogramme. */ .ac-frise-wrap { position: relative; margin-top: 64px; } .ac-frise-rail, .ac-frise-jauge { position: absolute; top: 20px; left: 20px; right: calc(20% - 20px); height: 2px; } .ac-frise-rail { background: #DCE6F2; } .ac-frise-jauge { background: #0B63F6; transform: scaleX(0); transform-origin: left center; } .ac-frise { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .ac-etape { padding-right: 26px; } .ac-etape:last-child { padding-right: 0; } .ac-etape-pastille { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 10px; background: #EEF5FF; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 180ms ease, transform 180ms ease; } .ac-etape:hover .ac-etape-pastille { background: #E2EEFF; transform: translateY(-2px); } .ac-etape h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .ac-etape p { font-size: 15px; line-height: 24px; color: #5C6E8A; } /* Le remplissage dure 8 s et chaque pastille s'allume à son passage : 0 / 2 / 4 / 6 / 8 s. La classe `ac-court` est posée par l'observateur d'intersection, RETIRÉE à la sortie du champ de vision et reposée à l'entrée — c'est ce qui fait rejouer la frise à chaque passage. */ @keyframes ac-frise-h { to { transform: scaleX(1); } } @keyframes ac-frise-v { to { transform: scaleY(1); } } .ac-frise-wrap.ac-court .ac-frise-jauge { animation: ac-frise-h 8s linear forwards; } @keyframes ac-etape-on { from { background: #EEF5FF; box-shadow: 0 0 0 0 rgba(11, 99, 246, .28); } 60% { box-shadow: 0 0 0 8px rgba(11, 99, 246, 0); } to { background: #0B63F6; box-shadow: 0 0 0 0 rgba(11, 99, 246, 0); } } @keyframes ac-etape-ico { to { stroke: #fff; } } .ac-frise-wrap.ac-court .ac-etape:nth-child(1) .ac-etape-pastille { animation: ac-etape-on 500ms ease forwards 0ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(2) .ac-etape-pastille { animation: ac-etape-on 500ms ease forwards 2000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(3) .ac-etape-pastille { animation: ac-etape-on 500ms ease forwards 4000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(4) .ac-etape-pastille { animation: ac-etape-on 500ms ease forwards 6000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(5) .ac-etape-pastille { animation: ac-etape-on 500ms ease forwards 8000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(1) .ac-etape-pastille svg { animation: ac-etape-ico 500ms ease forwards 0ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(2) .ac-etape-pastille svg { animation: ac-etape-ico 500ms ease forwards 2000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(3) .ac-etape-pastille svg { animation: ac-etape-ico 500ms ease forwards 4000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(4) .ac-etape-pastille svg { animation: ac-etape-ico 500ms ease forwards 6000ms; } .ac-frise-wrap.ac-court .ac-etape:nth-child(5) .ac-etape-pastille svg { animation: ac-etape-ico 500ms ease forwards 8000ms; } /* ══════════════════════════════════════════════════════════════════════════ 6. DES SERVICES PRÊTS À L'EMPLOI ══════════════════════════════════════════════════════════════════════════ */ .ac-services-sec { background: #F7FAFF; } .ac-services-inner { padding: 72px 0; } .ac-services-titre { font-size: 32px; font-weight: 700; line-height: 1.15; margin-bottom: 40px; } .ac-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; } /* La colonne entière est cliquable. `flex-direction: column` plus `margin-top: auto` sur le lien : c'est ce qui ALIGNE les quatre « En savoir plus » sur la même ligne, quelle que soit la longueur des descriptions. */ .ac-svc { display: flex; flex-direction: column; padding-right: 32px; color: inherit; transition: transform 180ms ease; } .ac-svc + .ac-svc { padding-left: 32px; border-left: 1px solid #DCE6F2; } .ac-svc:last-child { padding-right: 0; } .ac-svc:hover { transform: translateY(-2px); color: inherit; } .ac-svc:hover .ac-svc-icone { background: #E2EEFF; } .ac-svc:hover .ac-svc-fleche { transform: translateX(3px); } .ac-svc:focus-visible { outline: 2px solid #0B63F6; outline-offset: 4px; } .ac-svc-icone { width: 40px; height: 40px; border-radius: 10px; background: #EEF5FF; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 180ms ease; } .ac-svc h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .ac-svc p { font-size: 15px; line-height: 24px; color: #5C6E8A; margin-bottom: 12px; max-width: 26ch; min-height: 72px; } .ac-svc-plus { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #0B63F6; } .ac-svc-fleche { transition: transform 180ms ease; } /* ══════════════════════════════════════════════════════════════════════════ 7. BANDEAU INFRASTRUCTURE ══════════════════════════════════════════════════════════════════════════ */ .ac-infra { position: relative; overflow: hidden; background: #0A1428; } /* DEUX LUEURS TRÈS BASSES DERRIÈRE LA CARTE. Sans elles, le bandeau est un aplat de 630 px de haut entre deux sections blanches, et la carte y flotte sans profondeur. Elles sont sur un pseudo-élément et non sur le fond du bloc pour rester SOUS le contenu sans créer de contexte d'empilement : la section ne porte ni `z-index`, ni `transform` — les étiquettes de la carte, elles, sont positionnées et passent naturellement devant. */ .ac-infra::before { content: ""; position: absolute; inset: -18% -10% auto; height: 150%; background: radial-gradient(56% 60% at 47% 34%, rgba(23, 84, 196, .30) 0%, rgba(23, 84, 196, 0) 62%), radial-gradient(38% 44% at 78% 76%, rgba(14, 56, 140, .22) 0%, rgba(14, 56, 140, 0) 64%); pointer-events: none; } .ac-infra .ac-sec { position: relative; } .ac-infra-grille { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.68fr) minmax(0, 0.9fr); gap: 40px; align-items: center; } /* ── COLONNE DE GAUCHE ──────────────────────────────────────────────────── */ /* Le tiret du surtitre. `.ac-surtitre` est commun à trois sections : il est repris tel quel, et seul le tiret s'ajoute ici. */ .ac-infra .ac-surtitre { display: flex; align-items: center; gap: 12px; } .ac-infra .ac-surtitre::before { content: ""; flex: 0 0 auto; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2C7BF2, rgba(44, 123, 242, .25)); } .ac-infra-titre { font-size: 30px; font-weight: 600; line-height: 1.22; color: #fff; margin-bottom: 20px; } /* Le dernier mot du titre porte le bleu. Le n'est là QUE pour la couleur : ni , ni , qui s'entendent à la lecture à voix haute alors que rien n'est emphatique — c'est de la hiérarchie visuelle. */ .ac-infra-titre span { color: #4D9BFF; } .ac-infra-texte { font-size: 15px; line-height: 1.75; color: #AFC0DA; } .ac-infra-filet { display: block; width: 64px; height: 2px; margin-top: 28px; border-radius: 2px; background: linear-gradient(90deg, #2C7BF2, rgba(44, 123, 242, 0)); } /* ── LA CARTE ───────────────────────────────────────────────────────────── */ .ac-infra-monde { position: relative; width: 100%; } /* `overflow: visible` : les deux lueurs de région et le flou du halo débordent du viewBox de quelques pixels, et un SVG coupe à sa boîte par défaut. */ .ac-infra-svg { display: block; width: 100%; height: auto; overflow: visible; } /* Le paquet qui parcourt la liaison Montréal–Paris. Un tiret de 7 % de la courbe, poussé d'un bout à l'autre : `pathLength="100"` dans le SVG rend le compte indépendant de la longueur réelle du tracé. */ .ac-infra-comete { animation: ac-infra-comete 5.2s linear infinite; } @keyframes ac-infra-comete { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } /* ── LES DEUX POINTS DE PRÉSENCE ──────────────────────────────────────────── LEUR PLACE VIENT DE LA PROJECTION, PAS DE L'ŒIL. La carte est dessinée en cylindrique équidistante de parallèle standard 36°, longitudes -180..180, latitudes 84..-56, dans un viewBox de 660 × 412 — et les deux villes y tombent ici : Montréal 45,50 N 73,57 O → 203,3 ; 138,0 → 30,802 % ; 33,483 % Paris 48,86 N 2,35 E → 334,0 ; 130,8 → 50,613 % ; 31,747 % tools/carte-reseau/carte.py recalcule et réaffiche ces deux pourcentages à chaque exécution : toute retouche au cadre de la carte se reporte ici. EN HTML ET NON DANS LE SVG, délibérément : le repère garde ainsi sa taille en pixels quelle que soit la largeur de la carte. Dessiné dans le SVG, il rétrécirait avec elle — sur un téléphone de 360 px, le noyau tomberait à 6 px et l'étiquette à 7 px de corps. */ .ac-infra-pdp { position: absolute; width: 0; height: 0; } .ac-infra-pdp--ca { left: 30.802%; top: 33.483%; } .ac-infra-pdp--fr { left: 50.613%; top: 31.747%; } .ac-infra-noyau, .ac-infra-onde { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); } .ac-infra-noyau { width: 11px; height: 11px; background: radial-gradient(circle at 50% 42%, #fff 0%, #8CC4FF 42%, #1F6FE8 100%); box-shadow: 0 0 0 3.5px rgba(10, 20, 40, .55), 0 0 0 4.5px rgba(122, 178, 255, .40), 0 0 16px rgba(69, 146, 255, .90), 0 0 34px rgba(38, 112, 236, .55); } /* Les deux ondes portent la MÊME animation, décalée d'une demi-période : un souffle qui part du noyau et s'éteint en s'élargissant, pas un clignotement. Elles sont invisibles au repos (`opacity: 0`), ce qui les fait disparaître d'elles-mêmes quand le visiteur demande moins d'animation — la règle @media (prefers-reduced-motion) ramène toutes les durées à 1 ms. */ .ac-infra-onde { width: 12px; height: 12px; border: 1.5px solid rgba(126, 184, 255, .75); opacity: 0; animation: ac-infra-onde 3.6s cubic-bezier(.16, .62, .34, 1) infinite; } .ac-infra-onde--tard { animation-delay: 1.8s; } @keyframes ac-infra-onde { 0% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 70% { opacity: .10; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(4.6); } } /* La tige relie le noyau au dessous de son étiquette. Sa hauteur et le `bottom` de l'étiquette vont ensemble : `--ac-tige` porte la valeur pour les deux, et c'est elle seule qui diffère d'un repère à l'autre. */ .ac-infra-tige { position: absolute; bottom: 4px; left: 0; width: 1px; height: calc(var(--ac-tige) - 4px); background: linear-gradient(180deg, rgba(126, 184, 255, 0), rgba(126, 184, 255, .55)); } .ac-infra-pastille { position: absolute; bottom: var(--ac-tige); left: 0; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 8px 14px 9px 11px; border: 1px solid rgba(126, 178, 255, .22); border-radius: 11px; background: rgba(11, 24, 48, .86); box-shadow: 0 12px 30px rgba(2, 8, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; } /* AUCUNE DES DEUX ÉTIQUETTES N'EST CENTRÉE SUR SON POINT, et elles ne sont pas à la même hauteur. Montréal et Paris sont à 130 unités l'une de l'autre sur une carte qui en fait 660 de large : deux boîtes de 140 px centrées sur leur point se toucheraient. Celle du Canada part donc vers la gauche et monte plus haut, celle de la France vers la droite et reste basse — le décalage dans les deux sens est ce qui les sépare vraiment, et il suit le sens de lecture de la liaison qui les relie. */ .ac-infra-pdp--ca { --ac-tige: 52px; } .ac-infra-pdp--fr { --ac-tige: 24px; } .ac-infra-pdp--ca .ac-infra-pastille { transform: translateX(-92%); } .ac-infra-pdp--fr .ac-infra-pastille { transform: translateX(-8%); } .ac-infra-drapeau { grid-row: 1 / 3; display: block; width: 21px; height: 15.75px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); } .ac-infra-drapeau svg { display: block; width: 100%; height: 100%; } .ac-infra-pays { font-size: 13px; font-weight: 700; line-height: 1.25; color: #fff; } .ac-infra-ville { font-size: 11.5px; line-height: 1.3; color: #94A9C9; } /* ── LES QUATRE ENGAGEMENTS ───────────────────────────────────────────────── Une COLONNE, et un filet vertical qui la détache de la carte. La grille 2 × 2 d'avant alignait quatre blocs sur deux hauteurs différentes, et ses quatre `padding` asymétriques se recopiaient à chaque point de rupture. */ .ac-infra-atouts { display: grid; padding: 0 0 0 40px; margin: 0; border-left: 1px solid rgba(255, 255, 255, .09); list-style: none; } .ac-engagement { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; padding: 22px 0; } .ac-engagement + .ac-engagement { border-top: 1px solid rgba(255, 255, 255, .09); } .ac-infra-atouts > :first-child { padding-top: 0; } .ac-infra-atouts > :last-child { padding-bottom: 0; } .ac-engagement-icone { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(120, 170, 255, .20); border-radius: 13px; background: linear-gradient(160deg, rgba(40, 108, 255, .22), rgba(40, 108, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .ac-engagement svg { flex: 0 0 auto; } .ac-engagement h3 { font-size: 15px; font-weight: 600; color: #fff; margin: 2px 0 6px; } .ac-engagement p { font-size: 13.5px; line-height: 1.6; color: #9FB2CE; } /* ══════════════════════════════════════════════════════════════════════════ 8. ENGAGEMENTS + FAQ (#faq) ══════════════════════════════════════════════════════════════════════════ */ .ac-faq-sec { background: #fff; } .ac-faq-inner { padding: 64px 0; } .ac-eng-grille { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(400px, 410px) minmax(300px, 1fr); gap: 56px; align-items: start; } .ac-eng-titre { font-size: 22px; font-weight: 600; margin-bottom: 24px; } .ac-eng-liste { display: grid; gap: 16px; } .ac-eng { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: #3F5372; } .ac-eng svg { flex: 0 0 auto; margin-top: 2px; } .ac-eng-visuel { width: 100%; max-width: 410px; height: auto; display: block; margin: -35px auto 0; } .ac-faq-titre { font-size: 22px; font-weight: 600; margin-bottom: 20px; } .ac-faq { border-top: 1px solid #E8EEF6; } .ac-faq-item { border-bottom: 1px solid #E8EEF6; } /* Chaque question est un

qui n'a AUCUNE apparence de titre : c'est le motif ARIA de l'accordéon, et il sert à la navigation par titres des lecteurs d'écran — cinq questions sont autrement cinq boutons dans le vide. Le style est repris de son enfant `.ac-faq-q`. */ .ac-faq-h { /* LA POLICE EST REDITE ICI. Le

est un titre pour le lecteur d'écran, pas pour l'œil : sans cette ligne il prend Poppins comme tous les titres et son