/* ========================================================================== ITINEO — FICHE MODELE 2027 · LA FICHE ========================================================================== AUCUNE PHOTO N'EST RECADREE. Pas un seul object-fit, pas une seule rangee a hauteur fixe dans cette feuille : chaque image garde son format naturel (width:100% / height:auto) et le gabarit se dispose autour d'elle. C'est ce qui les rend grandes -- elles ne sont plus contraintes de tenir dans une case. Retenue parmi trois propositions le 17/08/2026. Les deux autres restent dans le depot -- fiche-2027-a.css et -c.css -- consultables par le banc d'essai, et supprimables le jour ou elles n'apprennent plus rien. L'ORDRE DE PAGE EST CONSTANT sur ses quatre premiers temps : heros, deux vis-a-vis, zone technique. C'est ce qui rend dix fiches comparables entre elles. Ce qui varie -- un troisieme bloc, un nombre de photos -- vient apres. LA TYPOGRAPHIE SE PARTAGE EN DEUX. La scotch display, lourde, ne sert qu'aux titres : h1, h2, et les quelques phrases qui en tiennent lieu (accroche, legende du « + »). Toute DONNEE -- les chiffres cles, le tableau -- est en Roboto. Une mesure n'est pas un titre. DEUX PRECAUTIONS CONTRE LES GRANDS BLANCS, qui guettent des qu'on melange des formats libres et des chevauchements : 1. Le decalage des colonnes est plafonne et la carte ne remonte que du quart de sa hauteur. Assez pour casser la ligne, pas pour creuser. 2. Les photos restantes passent en COLONNES CSS (column-count), pas en grille : le flux comble les hauteurs inegales de lui-meme. Une grille alignerait chaque rangee sur la photo la plus haute. Requiert fiche-2027-commun.css (jetons + zoom). ========================================================================== */ /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* PREALABLE AU STICKY */ /* styles.css pose overflow-x:hidden sur body ET sur html. Des qu'un overflow n'est plus « visible », l'element devient un conteneur de defilement -- et un position:sticky cherche alors a se coller au body, qui ne defile jamais, au lieu de la fenetre. Le sticky ne prend donc nulle part sur le site. overflow-x:clip coupe exactement pareil SANS creer de conteneur de defilement. La regle ne vaut que sur les pages qui chargent cette feuille ; et les navigateurs qui ignoreraient « clip » retombent simplement sur le « hidden » d'origine. A remonter dans styles.css le jour ou on voudra du sticky ailleurs. */ html,body{overflow-x:clip} .fb{font-family:var(--fm-texte);color:var(--fm-encre);font-size:16px;line-height:1.65;background:var(--fm-blanc)} /* La couleur pleine de la gamme, distincte du pastel de fond. data-gamme porte class_gamme, dont la valeur est « compact-famili » et non « compact » : la gamme s'appelle COMPACT a l'ecran mais garde son ancien nom dans la donnee. Un selecteur qui ne matche pas ne previent jamais -- le CJ660 et le CM660 sont restes sans couleur de gamme jusqu'au 17/08/2026. */ .fb[data-gamme="cozi"]{--fb-gamme:#006c8b} .fb[data-gamme="compact-famili"]{--fb-gamme:#bf5f2e} .fb[data-gamme="famili"]{--fb-gamme:#7d3f44} .fb__scene{max-width:var(--fm-tres-large);margin:0 auto;padding:0 24px} .fb__etroit{max-width:900px} .fb__etroit--medium{max-width:1080px} .fb img{max-width:100%} .fb a[data-zoom]{display:block;cursor:zoom-in} /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* HEROS */ /* Empile sur petit ecran, en vis-a-vis des 85em : la place ne manque plus, et le 3/4 gagne a etre regarde en meme temps qu'on lit le nom. */ .fb__heros{padding:clamp(30px,4vw,58px) 0 0;background:var(--pastelCozi)} .fb__heros[data-gamme="cozi"]{background:var(--pastelCozi)} .fb__heros[data-gamme="compact-famili"]{background:var(--pastelCompact)} .fb__heros[data-gamme="famili"]{background:var(--pastelFamili)} .fb__heros__duo{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,36px)} .fb__entete{text-align:center;max-width:900px;margin:0 auto;width:100%} .fb__gamme{font-family:var(--fm-libelle);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin:0 0 8px} .fb__heros[data-gamme="cozi"] .fb__gamme{color:var(--cozi)} .fb__heros[data-gamme="compact-famili"] .fb__gamme{color:var(--compactfamili)} .fb__heros[data-gamme="famili"] .fb__gamme{color:var(--famili)} .fb__nom{font-family:var(--fm-titre);font-weight:700;font-size:clamp(58px,11vw,138px);line-height:.86;letter-spacing:-.015em;margin:0;color:var(--fm-encre)} .fb__cartouches{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;justify-content:center;align-items:center} .fb__cartouche{font-family:var(--fm-libelle);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--fm-encre);color:var(--fm-encre);height:22px;display:flex;align-items:center;} .fb__cartouche > sup{text-transform:none;} .fb__cartouche--accent{background:var(--fm-accent);border-color:var(--fm-accent);color:var(--fm-blanc)} /* Le logo des 20 ans remplace le cartouche : c'est une signature, pas un mot. */ .fb__logo20{display:inline-flex;align-items:center;height:46px} .fb__logo20 svg{display:block;height:100%;width:auto} .fb__logo20 svg .cls-1{fill:#0081a5} .fb__accroche{font-family:var(--fm-titre);font-size:clamp(24px,3vw,42px);font-weight:400;line-height:1.16;margin:22px auto 0;max-width:24ch} .fb__heros__media{margin:0} .fb__heros__vue{margin:0} .fb__heros__vue img{display:block;width:100%;height:auto;margin:0 auto;max-width:1100px} /* La note du 3/4 se lit sous la photo, pas ailleurs. */ .fb__note{font-size:13px;line-height:1.6;color:var(--fm-encre-clair);margin:16px auto 0;max-width:70ch;text-align:center} @media (min-width:65em){ .fb__logo20{height:56px} } @media (min-width:85em){ .fb__heros__duo{grid-template-columns:1.06fr .94fr;gap:clamp(36px,4vw,72px);align-items:center;padding:0 5%} /* La photo passe a gauche sans quitter sa place dans le document : sur telephone, c'est le nom du modele qu'on veut lire en premier. */ .fb__heros__media{order:1} .fb__entete{order:2} .fb__note{text-align:left;margin-left:0} .fb__logo20{height:60px;margin-left:8px;margin-top:-8px} } /* Les chiffres cles. Pictogramme au-dessus, mesure en dessous, quatre par rangee au plus : les sept tiennent sur deux lignes. En Roboto -- la scotch display est reservee aux titres, elle pese trop pour une donnee. */ .fb__chiffres__carte{background:var(--fm-blanc);padding:clamp(22px,3vw,36px);margin-top:clamp(24px,3.5vw,44px);border:3px #eee solid} .fb__chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 16px;margin:0;padding:0;list-style:none} .fb__chiffre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px} .fb__chiffre__ico{width:46px;height:46px} .fb__chiffre__ico svg{display:block;width:100%;height:100%} .fb__chiffre__dire{display:block} .fb__chiffre__val{display:block;font-family:var(--fm-texte);font-size:clamp(18px,2vw,22px);font-weight:700;line-height:1.1;color:var(--fm-encre)} .fb__chiffre__lib{display:block;font-family:var(--fm-libelle);font-size:10px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--fm-encre-clair);margin-top:6px} @media (min-width:48em){ .fb__chiffres{grid-template-columns:repeat(4,1fr);gap:28px 20px} /*.fb__chiffres__carte{border-radius:20px 20px 20px 0}*/ .fb__chiffre__ico{width:50px;height:50px} } @media (min-width:60em){ /*.fb__chiffres__carte{border-radius:40px 40px 40px 0}*/ .fb__chiffre__ico{width:56px;height:56px} } @media (min-width:85em){ /*.fb__chiffres__carte{border-radius:60px 60px 60px 0}*/ .fb__chiffre__ico{width:66px;height:66px} } /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* VIS-A-VIS — la photo et sa carte, qui se chevauchent */ /* Le texte de la carte reste cale a gauche : le centrage appartient a la partie haute, et a elle seule. */ .fb__vis{padding:var(--fm-air) 0 0} .fb__vedette{margin:0} .fb__vedette img{display:block;width:100%;height:auto} /* La legende se cale sur le bord exterieur de sa photo. #page impose un text-align:center a toute la page : sans cette ligne, elle flotterait au milieu, sans rapport avec l'image qu'elle nomme. */ .fb__vedette figcaption,.fb__photo figcaption{font-family:var(--fm-libelle);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fm-encre-clair);margin-top:11px;text-align:left} .fb__carte{background:rgba(255,255,255,0.9);text-align:left;padding:clamp(24px,3vw,38px) 0 0;border:3px #eee solid} .fb__carte__rang{display:block;font-family:var(--fm-libelle);font-size:12px;font-weight:700;letter-spacing:.16em;margin-bottom:10px} [data-gamme="cozi"] .fb__carte__rang{color:var(--cozi)} [data-gamme="compact-famili"] .fb__carte__rang{color:var(--compactfamili)} [data-gamme="famili"] .fb__carte__rang{color:var(--famili)} .fb__carte__titre{font-family:var(--fm-titre);font-size:clamp(28px,3.6vw,38px);font-weight:700;line-height:1.08;margin:0 0 20px;color:var(--fm-encre)} .fb__carte__liste{margin:0;padding:0;list-style:none} /* Le selecteur direct « > » est ici essentiel : sans lui, une liste imbriquee recevrait DEUX marqueurs, le sien et le notre. */ .fb__carte__liste > li{position:relative;padding-left:20px;margin:0 0 11px;line-height:1.55} /* La puce est ecrite en echappement CSS et non en caractere : les feuilles sont servies sans charset, un « • » litteral serait lu en ISO-8859-1. */ .fb__carte__liste > li::before{content:"\2022";position:absolute;left:0;top:0;line-height:1.55;font-size:1.05em} [data-gamme="cozi"] .fb__carte__liste > li::before{color:var(--cozi)} [data-gamme="compact-famili"] .fb__carte__liste > li::before{color:var(--compactfamili)} [data-gamme="famili"] .fb__carte__liste > li::before{color:var(--famili)} /* UN SECOND NIVEAU, si la saisie en comporte un. Il reste possible, mais la convention du site est la ligne « - » dans le meme
  • : deux facons de dire la meme chose se contredisent tot ou tard. Marqueur discret, pas de couleur de gamme -- un niveau secondaire ne reclame pas l'attention. */ .fb__carte__liste ul{margin:7px 0 0;padding:0 0 0 16px;list-style:none} .fb__carte__liste ul li{position:relative;padding-left:16px;margin:0 0 6px;line-height:1.5;font-size:.94em;} .fb__carte__liste ul li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--fm-encre-clair)} @media (min-width:48em){ /*.fb__carte{border-radius:20px 20px 20px 0}*/ } @media (min-width:60em){ /*.fb__carte{border-radius:40px 40px 40px 0}*/ } @media (min-width:85em){ /*.fb__carte{border-radius:60px 60px 60px 0}*/ } /* Le chevauchement. Les deux blocs partagent la rangee 1 et leurs colonnes se recouvrent : la carte passe par-dessus le bas de la photo. Une vedette en portrait etant deja haute, elle prend moins de colonnes. */ @media (min-width:75em){ /* LA CARTE ARRIVE EN MEME TEMPS QUE LA PHOTO, ET RESTE. Calee en bas, elle n'apparaissait qu'apres neuf cents pixels d'image : on regardait longtemps sans savoir ce qu'on regardait, et le texte tombait en legende de ce qu'on venait de quitter. Calee en haut et rendue collante, elle entre avec la photo et l'accompagne -- l'ordre de lecture redevient titre, liste, puis image. Surtout, LA REGLE EST LA MEME POUR TOUS LES FORMATS. Une page qui se comporte autrement d'un bloc a l'autre empeche le lecteur de prendre ses reperes : c'est cela qui gene au defilement, pas la vitesse. */ .fb__duo{display:grid;grid-template-columns:repeat(12,1fr);align-items:start} .fb__vedette{grid-row:1} /* LE DECROCHAGE EST TOUJOURS LA. La carte descend de 40 a 110 px sur la photo, qu'elle colle ou non : c'est lui qui fait le chevauchement, et il n'a rien a voir avec le defilement. */ .fb__carte{grid-row:1;z-index:2;padding:clamp(26px,2.8vw,40px);align-self:start;margin-top:clamp(40px,6vw,110px);margin-bottom:0} /* Elle ne devient collante que si la photo est au moins une fois et demie plus haute qu'elle -- seuil mesure au chargement, voir le script en bas de fiche.php. En deca, coller ne servirait qu'a la faire depasser de l'image, ce qui se voit et ne s'explique pas. Sa course s'arrete au bas de l'IMAGE et non de la figure : sans la marge basse, elle descendrait jusque sous la legende. */ .fb__duo[data-collant="oui"] .fb__carte{position:sticky;top:calc(var(--fb-menu) + var(--fb-repos));margin-bottom:var(--fb-legende, 0px)} .fb__vis[data-sens="photo-gauche"] .fb__duo[data-vedette="paysage"] .fb__vedette,.fb__vis[data-sens="photo-gauche"] .fb__duo[data-vedette="carre"] .fb__vedette{grid-column:1 / 9} .fb__vis[data-sens="photo-gauche"] .fb__duo[data-vedette="paysage"] .fb__carte,.fb__vis[data-sens="photo-gauche"] .fb__duo[data-vedette="carre"] .fb__carte{grid-column:8 / 13} .fb__vis[data-sens="photo-gauche"] .fb__duo[data-vedette="portrait"] .fb__vedette{grid-column:1 / 7} .fb__vis[data-sens="photo-gauche"] .fb__duo[data-vedette="portrait"] .fb__carte{grid-column:6 / 13} .fb__vis[data-sens="photo-droite"] .fb__duo[data-vedette="paysage"] .fb__vedette,.fb__vis[data-sens="photo-droite"] .fb__duo[data-vedette="carre"] .fb__vedette{grid-column:5 / 13} .fb__vis[data-sens="photo-droite"] .fb__duo[data-vedette="paysage"] .fb__carte,.fb__vis[data-sens="photo-droite"] .fb__duo[data-vedette="carre"] .fb__carte{grid-column:1 / 6} .fb__vis[data-sens="photo-droite"] .fb__duo[data-vedette="portrait"] .fb__vedette{grid-column:7 / 13} .fb__vis[data-sens="photo-droite"] .fb__duo[data-vedette="portrait"] .fb__carte{grid-column:1 / 8} /* Photo a gauche, legende a gauche ; photo a droite, legende a droite. La largeur bornee l'empeche de passer sous la carte. */ .fb__vedette figcaption{max-width:58%} .fb__vis[data-sens="photo-droite"] .fb__vedette figcaption{text-align:right;margin-left:auto} /* Sans photo, la carte reprend toute la largeur plutot que de laisser la moitie de la scene vide. */ .fb__duo[data-vedette="aucune"] .fb__carte{grid-column:1 / 13;position:static;margin-top:0;padding-left:0;padding-right:0} } /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* ZONE TECHNIQUE — les implantations et le « + » */ /* Les plans sont des dessins d'execution : on joue le jeu. Un filet court sur toute la largeur de page pour ouvrir la zone, un cadre pour la fermer, et une refente verticale qui separe les plans du « + ». */ .fb__zone{margin-top:var(--fm-air);padding:clamp(34px,4.5vw,66px) 0;border-top:1px dashed var(--fm-trait);border-bottom:1px dashed var(--fm-trait);background:#fbfaf9} .fb__titre{font-family:var(--fm-titre);font-size:clamp(30px,4vw,54px);font-weight:700;line-height:1.05;margin:0 0 28px;color:var(--fm-encre)} .fb__cadre{border:1px dashed var(--fm-trait);background:var(--fm-blanc);display:grid;grid-template-columns:1fr} .fb__cadre__plans{display:grid;grid-template-columns:1fr;align-content:start} .fb__plan{margin:0;padding:clamp(16px,2vw,26px)} .fb__plan + .fb__plan{border-top:1px dashed var(--fm-trait)} .fb__plan img{display:block;width:100%;height:auto} .fb__plan__chapeau{display:flex;align-items:center;gap:9px;font-family:var(--fm-libelle);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fm-encre-clair);margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid var(--fm-filet)} .fb__plan__chapeau svg{width:16px;height:16px;flex:0 0 16px;color:var(--fb-gamme,var(--fm-accent))} /* Les cotes ne se portent que sur le plan de jour : les repeter sous le plan de nuit alourdirait sans rien apprendre. */ .fb__plan__cotes{margin-left:auto;letter-spacing:.1em;font-weight:600;color:var(--fm-encre)} /* Le « + ». La pastille se pose a cheval sur le coin haut gauche de la refente : c'est ce decalage qui la fait lire comme une estampille et non comme un element de plus dans la colonne. */ .fb__cadre__plus{position:relative;padding:clamp(22px,2.4vw,32px);border-top:1px solid var(--fm-trait)} .fb__plus__pastille{position:absolute;top:0;right:0;transform:translate(50%,-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:999px;background:var(--fb-gamme,var(--fm-accent));color:var(--fm-blanc);font-family:var(--fm-titre);font-size:62px;font-weight:700;line-height:1;} .fb__plus__photo{margin:0} .fb__plus__photo img{display:block;width:100%;height:auto} /* Le texte se cale sur le bord gauche de la photo, pas sur un axe a lui. */ .fb__plus__texte{font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.25;margin:24px 0 0;text-align:left} @media (min-width:60em){ .fb__cadre{grid-template-columns:0.8fr 1.2fr} /* Les deux plans gardent leur hauteur propre -- ils ne s'etirent pas pour rattraper la photo d'a cote -- et accompagnent le defilement tant qu'elle passe. Le filet de refente, lui, reste porte par la colonne de droite, qui remplit toujours la rangee. */ .fb__cadre__plans{align-self:start;position:sticky;top:calc(var(--fb-menu) + var(--fb-repos))} .fb__cadre__plus{border-top:0;border-left:1px dashed var(--fm-trait);display:flex;flex-direction:column;justify-content:center} } /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* VISITE 360 ET VIDEO */ /* Ces deux blocs venaient de l'ancienne charte et juraient : titre en serif f-belly, cadre a ombre portee, filet de fin. On les repose ici dans la meme grammaire que le reste de la fiche -- filet pointille en haut, chapeau en capitales, titre condense -- pour qu'ils se lisent comme une section parmi les autres et non comme une piece rapportee. */ .fb__immersif{margin-top:var(--fm-air);padding:clamp(34px,4.5vw,66px) 0 0;border-top:1px dashed var(--fm-trait)} .fb__immersif__accroche{font-family:var(--fm-libelle);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fm-encre-clair);margin:0 0 10px;text-align:center} .fb__immersif__accroche span{color:var(--fb-gamme,var(--fm-accent))} .fb__immersif__titre{font-family:var(--fm-titre);font-size:clamp(30px,4vw,54px);font-weight:700;line-height:1.05;margin:0 0 28px;color:var(--fm-encre);text-align:center} /* Le rapport 16/9 tient le cadre avant meme que l'iframe ait charge : sans lui la page sursaute au chargement de la visite, qui pese lourd. */ .fb__immersif__cadre{position:relative;aspect-ratio:16/9;background:var(--fm-voile);border:1px solid var(--fm-filet);overflow:hidden} .fb__immersif__cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* Le lien plein ecran : discret, mais atteignable au clavier comme le reste. */ .fb__immersif__plein{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 0;color:var(--fm-encre);text-decoration:none} .fb__immersif__plein svg{width:17px;height:17px;flex:0 0 17px;color:var(--fb-gamme,var(--fm-accent))} .fb__immersif__plein__lib{font-family:var(--fm-libelle);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid currentColor} .fb__immersif__plein__note{font-size:12px;color:var(--fm-encre-clair)} .fb__immersif__plein:hover .fb__immersif__plein__lib{color:var(--fb-gamme,var(--fm-accent))} .fb__immersif__plein:focus-visible{outline:2px solid var(--fb-gamme,var(--fm-accent));outline-offset:3px} /* Deux blocs a la suite -- la visite puis la video -- ne rejouent pas le filet : ils forment une meme respiration. */ .fb__immersif + .fb__immersif{margin-top:clamp(34px,4.5vw,66px);padding-top:0;border-top:0} @media (min-width:60em){ .fb__immersif__plein{margin-top:20px} } /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* LES PHOTOS RESTANTES — deux colonnes, en flux */ /* column-count et non grid : les hauteurs sont libres, et le flux comble. Une grille alignerait chaque rangee sur la photo la plus haute. */ .fb__reste{padding:var(--fm-air) 0 0} .fb__mosaique{column-count:1;column-gap:clamp(18px,2.5vw,34px)} .fb__photo{margin:0 0 clamp(18px,2.5vw,34px);break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid} .fb__photo img{display:block;width:100%;height:auto} @media (min-width:60em){ .fb__mosaique{column-count:2} /* Une photo seule ne peut pas remplir deux colonnes : elle laissait la moitie droite blanche. On la centre, bornee selon son orientation -- un portrait etale sur toute la largeur ferait deux mille pixels de haut. Elle se lit alors comme une image de fin, choisie, et non comme une colonne qu'on aurait oublie de remplir. */ .fb__mosaique[data-nb="1"]{column-count:1;margin-left:auto;margin-right:auto} .fb__mosaique[data-nb="1"][data-seule="portrait"]{max-width:46%} .fb__mosaique[data-nb="1"][data-seule="paysage"], .fb__mosaique[data-nb="1"][data-seule="carre"]{max-width:74%} .fb__mosaique[data-nb="1"] .fb__photo{margin-bottom:0} } /* /-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/-/ */ /* TECHNIQUE */ /* Aucun style de bouton ici : les deux liens portent .cta-classic, le composant du site, et sa variante en reverse. On ne redessine pas ce qui existe deja ailleurs -- on se contente de les mettre a la meme taille. La fin de page tient sur un seul pas de 34 px : tableau, bouton poids, bouton guide, legende. Rien ne se rattrape a la marge negative. */ .fb__tech{margin-top:var(--fm-air);padding:clamp(34px,4.5vw,66px) 0 var(--fm-air);border-top:1px dashed var(--fm-trait)} .fb__tech__titre{font-family:var(--fm-titre);font-size:clamp(30px,4vw,54px);font-weight:700;line-height:1.05;margin:0 0 28px;color:var(--fm-encre);text-align:center} .fb__tech__boite{overflow-x:auto} .fb__tech__table{width:100%;border-collapse:collapse;font-size:15px} .fb__tech__table td{padding:13px 16px 13px 0;border-bottom:1px solid var(--fm-filet)} .fb__tech__table td:first-child{font-family:var(--fm-libelle);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--fm-encre-clair);text-align:left} .fb__tech__table td:last-child{text-align:right;padding-right:0;font-weight:500} /* Les deux boutons empiles, de meme largeur et de meme corps : le libelle du guide technique porte ses propres et , qu'on ramene au rang du reste. */ .fb__liens{display:flex;flex-direction:column;align-items:center;gap:14px;margin:34px 0 0} .fb__liens .cta-classic{width:100%;max-width:480px;margin:0;font-size:16px;line-height:1.35;text-align:center} .fb__liens .cta-classic span,.fb__liens .cta-classic strong{font-size:16px} .fb__liens .cta-classic .u-link-arr__svg{flex:0 0 20px;width:20px;height:auto} .fb__legende{font-size:12px;line-height:1.6;color:var(--fm-encre-clair);margin:34px 0 0;padding:0;border:0;text-align:center}