:root{--green:#124b36;--dark:#071b14;--light:#f7faf6;--line:#dfe8df;--text:#17251f;--muted:#66736d;--white:#fff;--soft:#eef7ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--white)}a{color:inherit}img,video{max-width:100%;display:block}.gf-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.gf-header-main{max-width:1200px;margin:auto;padding:11px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{line-height:0;flex:0 0 auto}.gf-logo{height:44px;width:auto}.gf-main-nav{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-wrap:wrap}.gf-main-nav a{text-decoration:none;font-weight:650;color:var(--green);padding:7px 9px;border-radius:999px;font-size:.9rem}.gf-main-nav a:hover{background:var(--soft)}.hero{height:74vh;min-height:510px;position:relative;display:grid;place-items:center;overflow:hidden;background:var(--dark)}.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,20,.90) 0%,rgba(7,27,20,.74) 46%,rgba(7,27,20,.40) 100%)}.hero-logo{position:relative;z-index:1;padding:28px}.hero-logo img{width:min(420px,72vw);height:auto}.section{padding:66px 22px;background:var(--white)}.section.muted{background:var(--light)}.inner{max-width:1180px;margin:auto}.inner.narrow{max-width:850px}.page-hero{padding:72px 22px 36px;background:var(--light);border-bottom:1px solid var(--line)}.page-hero p{font-size:1.12rem;max-width:860px}.eyebrow{display:inline-block;font-weight:800;color:var(--green);background:var(--soft);padding:7px 12px;border-radius:999px;margin-bottom:16px}h1,h2{margin:0 0 24px;color:var(--green);letter-spacing:-.035em}h1{font-size:clamp(2.25rem,5vw,4.2rem)}h2{font-size:clamp(1.75rem,4vw,3rem)}h3{margin:0 0 7px;color:var(--green);font-size:1.05rem}p{line-height:1.58;color:var(--muted)}ul{margin:0;padding-left:19px;color:var(--muted);line-height:1.65}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.section-head h2{margin:0}.button,.small-button{display:inline-flex;text-decoration:none;background:var(--green);color:white;border-radius:999px;padding:10px 16px;font-weight:800;white-space:nowrap;border:0}.small-button{padding:8px 12px;font-size:.9rem}.button.secondary{background:white;color:var(--green);border:1px solid var(--line)}.split{display:grid;grid-template-columns:1fr .72fr;gap:28px;align-items:center}.process-media-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:stretch}.process-media-grid .process-schema-card{margin:0}.process-media-grid .process-video{height:100%;min-height:420px}.process-video{width:100%;max-height:660px;object-fit:cover;border-radius:20px;border:1px solid var(--line);background:#000}.process-schema-card{background:white;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.032)}.process-schema-card img{width:100%;max-height:760px;object-fit:contain;border-radius:14px;background:#fff}.vision-classic{background:var(--white);border-bottom:1px solid var(--line)}.vision-classic-card{max-width:900px;margin:0 auto;padding:38px 42px;background:var(--light);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 20px rgba(0,0,0,.025);text-align:left}.vision-classic-card h2{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:16px}.vision-sentence{font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.6;color:var(--text);font-weight:500;margin:0}.vision-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card,.vision-points article,.text-card,.team-card,.logo-card,.article-card,.shortcut-card,.qa-item{background:white;border:1px solid var(--line);border-radius:18px;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.032)}.vision-points article{padding:24px;line-height:1.58;color:var(--text);font-weight:650}.shortcut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.shortcut-card{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:170px}.shortcut-card p{margin:0}.product-intro{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.product-intro article{border:1px solid var(--line);border-radius:18px;padding:24px;background:white}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:white;margin-top:18px}table{width:100%;border-collapse:collapse}th,td{padding:15px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--green);background:var(--light)}tr:last-child td{border-bottom:0}.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.impact-card{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px}.impact-card strong{display:block;color:var(--green);font-size:1.3rem;margin-bottom:4px}.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.team-grid.full{grid-template-columns:repeat(3,1fr)}.team-card{padding:14px}.team-card.compact{text-align:center}.team-card>img{height:142px;width:100%;object-fit:contain;margin-bottom:10px;background:#f4f7f4;border-radius:14px}.team-card.full-card>img{height:180px}.team-card.text-only{display:flex;flex-direction:column;justify-content:space-between;min-height:260px}.team-card.text-only .card-icon{width:46px;height:46px;border-radius:999px;background:var(--soft);color:var(--green);display:grid;place-items:center;font-weight:900;font-size:1.3rem;margin-bottom:14px}.team-card p{margin:0 0 8px;font-size:.92rem}.team-card .role{color:var(--green);font-weight:800}.team-card .bio{font-size:.9rem;color:var(--muted);line-height:1.5}.linkedin{display:inline-grid;place-items:center;width:30px;height:30px;margin-top:4px}.linkedin img{width:24px;height:24px;object-fit:contain}.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.logo-card{min-height:116px;padding:16px;display:grid;place-items:center;text-align:center;gap:8px}.logo-card img{max-height:58px;width:100%;object-fit:contain}.logo-card span{font-size:.88rem;color:var(--muted);font-weight:750}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-card{padding:14px}.article-card img{height:150px;width:100%;object-fit:cover;border-radius:14px;margin-bottom:10px;background:#f4f7f4}.article-card span{display:inline-block;font-size:.82rem;color:var(--muted);margin-bottom:7px}.article-card p{margin:0;font-size:.88rem}.text-card{padding:26px;margin-bottom:16px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-email{font-size:1.4rem;color:var(--green);font-weight:800}.legal-list{display:grid;gap:0;margin:0}.legal-list div{display:grid;grid-template-columns:210px 1fr;gap:18px;padding:10px 0;border-bottom:1px solid var(--line)}.legal-list dt{font-weight:800;color:var(--green)}.legal-list dd{margin:0;color:var(--text)}.qa-list{display:grid;gap:14px}.qa-item{padding:22px}.qa-item h2{font-size:1.35rem;margin-bottom:10px}.legal-note{font-size:.9rem;text-align:center}.gf-footer{background:var(--dark);color:white;padding:34px 22px}.gf-footer-inner{max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}.gf-footer-logo img{height:46px}.gf-footer-links,.gf-socials{display:flex;gap:14px;flex-wrap:wrap}.gf-footer a{color:white;text-decoration:none;font-weight:650;opacity:.9}@media(max-width:1040px){.vision-classic-card{padding:28px 24px}.shortcut-grid{grid-template-columns:repeat(2,1fr)}.process-media-grid{grid-template-columns:1fr}.process-media-grid .process-video{height:auto;min-height:0}.split,.vision-points,.product-intro,.two-cols{grid-template-columns:1fr}.team-grid,.team-grid.full{grid-template-columns:repeat(3,1fr)}.article-grid{grid-template-columns:repeat(2,1fr)}.logo-grid{grid-template-columns:repeat(3,1fr)}.impact-grid{grid-template-columns:repeat(2,1fr)}.gf-header-main{align-items:flex-start;flex-direction:column}.hero{height:64vh}}@media(max-width:650px){.team-grid,.team-grid.full,.article-grid,.logo-grid,.shortcut-grid{grid-template-columns:1fr 1fr}.section{padding:50px 18px}.hero{min-height:420px}.gf-logo{height:40px}.gf-main-nav a{font-size:.84rem;padding:7px}.section-head{align-items:flex-start;flex-direction:column}.legal-list div{grid-template-columns:1fr;gap:4px}.contact-email{font-size:1.1rem}.impact-grid{grid-template-columns:1fr}}@media(max-width:460px){.team-grid,.team-grid.full,.article-grid,.logo-grid,.shortcut-grid{grid-template-columns:1fr}.hero-logo img{width:78vw}}

/* ------------------------------------------------------------------
 * Conversion : le formulaire, les appels a l'action, la chaleur.
 *
 * Le site disait ce qu'il faisait sans jamais rien demander. Ces
 * regles servent le moment ou le visiteur passe de « je lis » a
 * « je prends contact ».
 * ------------------------------------------------------------------ */

:root{
  /* Un ton chaud, pour reposer l'oeil du vert et marquer ce sur quoi
   * on veut qu'on clique. */
  --chaud:#e07a3f;
  --chaud-clair:#fdf1e8;
  --creme:#fbf8f3;
}

/* Le bouton qui compte. Un seul ton chaud sur la page : s'ils sont
 * deux, aucun ne ressort. */
.button.action{background:var(--chaud);color:#fff;border:0;box-shadow:0 10px 24px rgba(224,122,63,.26)}
.button.action:hover{background:#cf6c33}
.button.fantome{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
.button.fantome:hover{background:rgba(255,255,255,.12)}

/* L'en-tete porte desormais un bouton : le contact ne doit jamais
 * etre a plus d'un clic, depuis n'importe quelle page. */
.gf-main-nav .nav-action{background:var(--chaud);color:#fff;padding:9px 15px;margin-left:6px}
.gf-main-nav .nav-action:hover{background:#cf6c33}

/* Le hero : un message et deux chemins, au lieu d'un logo muet. */
.hero-contenu{position:relative;z-index:1;max-width:1180px;margin:auto;padding:28px 22px;width:100%}
/* Le logo est deja dans l'en-tete juste au-dessus : ici il rappelle
 * la marque sans manger la place du message. */
.hero-contenu .hero-logo{position:static;padding:0 0 18px}
.hero-contenu .hero-logo img{width:min(260px,52vw)}
.hero-titre{color:#fff;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.035em;margin:0 0 16px;max-width:17ch;text-shadow:0 2px 24px rgba(7,27,20,.45)}
.hero-sous{color:rgba(255,255,255,.93);font-size:clamp(1.02rem,1.7vw,1.26rem);line-height:1.55;max-width:56ch;margin:0 0 26px;text-shadow:0 2px 18px rgba(7,27,20,.45)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-preuve{margin:26px 0 0;color:rgba(255,255,255,.82);font-size:.92rem;font-weight:650}

/* Les deux portes d'entree : methaniseur ou acheteur. Un visiteur ne
 * doit pas avoir a deviner laquelle le concerne. */
.portes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.porte{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.04)}
.porte.chaude{background:var(--chaud-clair);border-color:#f3dbc8}
.porte h3{font-size:1.32rem;margin:0}
.porte p{margin:0}
.porte ul{margin:2px 0 0;padding-left:18px}
.porte ul li{margin-bottom:5px}
.porte .button{align-self:flex-start;margin-top:6px}

/* Le bloc de conversion en fin de page. */
.appel{background:var(--green);color:#fff;border-radius:26px;padding:44px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.appel h2{color:#fff;margin:0 0 10px}
.appel p{color:rgba(255,255,255,.9);margin:0;max-width:60ch}
.appel .button{background:var(--chaud);color:#fff}
.appel .button:hover{background:#cf6c33}

/* Le formulaire. */
.gf-form{display:grid;gap:16px}
.gf-sujets{display:flex;gap:8px;flex-wrap:wrap}
.gf-sujet{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:999px;padding:9px 15px;font:inherit;font-size:.92rem;font-weight:700;cursor:pointer}
.gf-sujet:hover{border-color:var(--chaud)}
.gf-sujet.actif{background:var(--chaud);border-color:var(--chaud);color:#fff}
.gf-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gf-champ{display:grid;gap:6px}
.gf-champ>span{font-size:.88rem;font-weight:750;color:var(--green)}
.gf-champ>span i{color:var(--chaud);font-style:normal}
.gf-champ input,.gf-champ textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--text);width:100%}
.gf-champ input:focus,.gf-champ textarea:focus{outline:2px solid var(--chaud);outline-offset:1px;border-color:transparent}
.gf-champ textarea{resize:vertical;min-height:110px}
.gf-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gf-envoi{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gf-envoi .button{background:var(--chaud)}
.gf-envoi .button:hover{background:#cf6c33}
.gf-envoi .button:disabled{opacity:.6;cursor:default}
.gf-note{margin:0;font-size:.86rem;color:var(--muted)}
.gf-retour{margin:0;font-weight:700}
.gf-retour.erreur{color:#a8401c}
.gf-merci{padding:30px;border-radius:20px;background:var(--chaud-clair);border:1px solid #f3dbc8}
.gf-merci h3{font-size:1.4rem;margin-bottom:8px}
.gf-merci p{margin:0;color:var(--text)}

/* Un fond creme plutot que blanc sur les sections de respiration :
 * c'est ce qui rechauffe une page sans rien changer d'autre. */
.section.creme{background:var(--creme)}

@media(max-width:860px){
  .portes{grid-template-columns:1fr}
  .appel{grid-template-columns:1fr;padding:32px;text-align:left}
  .gf-grille{grid-template-columns:1fr}
  .hero-titre{max-width:none}
}

/* ------------------------------------------------------------------
 * Chaleur et tenue typographique.
 *
 * Le site declarait Inter sans jamais la charger : il s'affichait donc
 * en Arial, et c'est la premiere raison de sa froideur. Les polices
 * sont desormais servies depuis le site lui-meme.
 *
 * Fraunces pour les titres : une serif a contraste doux, qui apporte
 * de la chaleur sans sortir du registre serieux attendu par un
 * industriel. Inter pour le texte courant, qui se lit a toutes les
 * tailles.
 * ------------------------------------------------------------------ */

body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--creme);-webkit-font-smoothing:antialiased}
h1,h2,h3,.hero-titre{font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-weight:600;font-variation-settings:'opsz' 96;letter-spacing:-.018em}
h1,.hero-titre{line-height:1.04}
h2{line-height:1.12}
h3{font-weight:600;letter-spacing:-.008em}

/* Du blanc partout durcit une page. Le fond creme porte les sections,
 * le blanc ne sert plus qu'aux cartes, qui ressortent d'autant mieux. */
.section{background:transparent}
.section.muted{background:#f1f6f0}
.section.creme{background:var(--chaud-clair)}
.page-hero{background:transparent;border-bottom:1px solid var(--line)}

/* Des ombres chaudes plutot que grises : c'est ce qui fait qu'une
 * carte posee sur du creme semble eclairee et non decoupee. */
.card,.vision-points article,.text-card,.team-card,.logo-card,.article-card,.shortcut-card,.qa-item,
.porte,.process-schema-card,.table-wrap{box-shadow:0 10px 30px rgba(120,84,48,.07);border-color:#e8e3d9}

/* Un peu d'air : le site respirait court. */
.section{padding:84px 22px}
h1,h2{margin-bottom:20px}
p{line-height:1.65}

/* Les titres de section, accompagnes d'un trait chaud. */
.section-head h2,.inner>h2{position:relative;padding-top:18px}
.section-head h2::before,.inner>h2::before{content:'';position:absolute;top:0;left:0;width:46px;height:4px;border-radius:99px;background:var(--chaud)}
.appel h2::before{display:none}
.appel h2{padding-top:0}

/* Les cartes d'equipe : des visages, plus grands et plus chaleureux. */
.team-card>img{height:168px;background:var(--chaud-clair)}
.team-card.compact{padding:18px 14px 16px}

/* Le pied de page, moins abrupt. */
.gf-footer{background:var(--dark);padding:46px 22px}

@media(max-width:650px){
  .section{padding:58px 18px}
}

/* ------------------------------------------------------------------
 * Les defiles.
 *
 * L'accueil ne montrait que trois articles sur vingt et quatre membres
 * sur sept, derriere un « Voir plus » que personne ne clique. Tout y
 * est desormais, dans une bande qui defile horizontalement : on voit
 * d'un coup l'ampleur de ce qui existe, et on parcourt au doigt ou a
 * la molette.
 *
 * Le defilement s'arrete sur chaque carte (scroll-snap) : on ne se
 * retrouve jamais avec une carte coupee en deux.
 * ------------------------------------------------------------------ */

.defile{
  display:grid;
  grid-auto-flow:column;
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* De quoi laisser respirer l'ombre des cartes et aligner la
   * premiere sur le bord du contenu. */
  padding:6px 22px 20px;
  margin:0 -22px;
  scrollbar-width:thin;
  scrollbar-color:#d9d2c6 transparent;
}
.defile::-webkit-scrollbar{height:8px}
.defile::-webkit-scrollbar-track{background:transparent}
.defile::-webkit-scrollbar-thumb{background:#d9d2c6;border-radius:99px}
.defile>*{scroll-snap-align:start}

/* Chaque famille a sa largeur de carte : un logo n'a pas besoin de la
 * meme place qu'un article. */
.defile-articles>*{width:300px}
.defile-equipe>*{width:230px}
.defile-logos>*{width:190px}

/* Une carte de defile garde sa hauteur, quel que soit son texte. */
.defile-articles .article-card{display:flex;flex-direction:column}
.defile-articles .article-card h3{font-size:1rem;line-height:1.3}
.defile-equipe .team-card{height:100%}
.defile-logos .logo-card{height:100%}

/* L'indice que ca defile : un degrade au bord droit, qui disparait
 * quand on arrive au bout. */
.defile-cadre{position:relative}
.defile-cadre::after{
  content:'';position:absolute;top:0;right:0;bottom:16px;width:56px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(251,248,243,0),rgba(251,248,243,.95));
}
.section.muted .defile-cadre::after{background:linear-gradient(90deg,rgba(241,246,240,0),rgba(241,246,240,.95))}
.defile-cadre.au-bout::after{opacity:0;transition:opacity 200ms ease}

@media(max-width:650px){
  .defile{padding:6px 18px 18px;margin:0 -18px}
  .defile-articles>*{width:270px}
  .defile-equipe>*{width:200px}
  .defile-logos>*{width:160px}
}

/* Une serif a 1 rem se lit mal sur trois lignes serrees : les titres
 * d'articles reviennent a la sans. Les noms de l'equipe et les titres
 * de section gardent la serif, qui est la pour donner le ton. */
.article-card h3{font-family:'Inter',system-ui,Arial,sans-serif;font-weight:650;font-size:.98rem;line-height:1.38;letter-spacing:-.004em}
.article-card span{font-weight:600}

/* Une carte d'article dont l'image manque ne doit pas s'ecrouler. */
.defile-articles .article-card img{height:140px;flex:0 0 auto}
.defile-articles .article-card p{margin-top:auto;padding-top:8px}

/* Le bandeau cycle de vie : des chiffres qui doivent se lire d'un
 * coup d'oeil, pas un tableau de plus. */
.impact-grid{gap:16px;margin:28px 0 14px}
.impact-card{background:#fff;border:1px solid #e8e3d9;border-radius:18px;padding:24px;
  box-shadow:0 10px 30px rgba(120,84,48,.07);color:var(--muted);font-size:.95rem;line-height:1.45}
.impact-card strong{font-family:'Fraunces','Iowan Old Style',Georgia,serif;font-weight:600;
  font-size:2rem;line-height:1.05;margin-bottom:8px;color:var(--green);letter-spacing:-.02em}

/* Les listes des deux portes : des puces discretes, et le terme
 * important en gras plutot qu'en couleur. */
.porte ul{list-style:none;padding-left:0}
.porte ul li{position:relative;padding-left:22px;margin-bottom:8px;color:var(--text);font-size:.96rem}
.porte ul li::before{content:'';position:absolute;left:0;top:.52em;width:8px;height:8px;
  border-radius:50%;background:var(--chaud)}
.porte.chaude ul li::before{background:var(--green)}
.porte ul li strong{font-weight:700}

/* Le hero porte desormais deux chiffres en gras : ils doivent se
 * detacher sans crier. */
.hero-sous strong{color:#fff;font-weight:700}

/* Un bouton ne doit jamais elargir son conteneur. Le « nowrap »
 * d'origine convenait a « Voir plus » ; il ne convient plus a des
 * libelles qui disent ce qu'on obtient en cliquant. */
.button,.small-button{max-width:100%;white-space:normal;text-align:center}
.porte .button{align-self:stretch;justify-content:center}
.hero-actions .button{white-space:nowrap}

@media(max-width:420px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{white-space:normal;justify-content:center}
}

/* ------------------------------------------------------------------
 * Les portraits de l'equipe.
 *
 * Quatre photos sont detourees sur fond transparent, une autre est un
 * detourage circulaire pose sur du blanc opaque, et les cadrages ne
 * se ressemblent pas. Sur un fond creme, cette difference se voit
 * immediatement : un carre blanc au milieu de portraits flottants.
 *
 * Plutot que de retoucher cinq fichiers a la main, on impose le meme
 * cadre a tous : un cercle, qui rogne les coins blancs de l'un et
 * donne un fond chaud a ceux qui n'en ont pas. Le resultat est
 * identique quelle que soit la source.
 * ------------------------------------------------------------------ */

.team-card>img{
  width:150px;
  height:150px;
  margin:0 auto 14px;
  border-radius:50%;
  object-fit:cover;
  /* Les portraits cadrent le visage dans le haut de l'image : centrer
   * a 50 % couperait le menton et garderait du vide au-dessus. */
  object-position:center 16%;
  background:linear-gradient(160deg,#eef6ef,var(--chaud-clair));
  border:1px solid #e8e3d9;
}
.team-card.full-card>img{width:168px;height:168px}
.team-card.compact{text-align:center}
.team-card.compact h3{margin-top:2px}

/* Dans la bande qui defile, la carte reste lisible et de hauteur
 * constante quelle que soit la longueur du nom. */
.defile-equipe .team-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.defile-equipe .team-card .role{margin-bottom:6px}