refactor: remove dsfr classes from section component

Author: elisfainstein

apps/site/app/global.css

@@ -2,29 +2,34 @@
 @import '@/ui/global.css';
 
 /*** CSS spécifique au site ***/
+
+.container {
+  @apply px-6;
+}
+
 @media (min-width: 78em) {
-  .fr-container,
-  .fr-container-sm,
-  .fr-container-md,
-  .fr-container-lg {
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg {
     max-width: 100%;
   }
 }
 
 @media (min-width: 1280px) {
-  .fr-container,
-  .fr-container-sm,
-  .fr-container-md,
-  .fr-container-lg {
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg {
     max-width: 1280px;
   }
 }
 
 @media (min-width: 1350px) {
-  .fr-container,
-  .fr-container-sm,
-  .fr-container-md,
-  .fr-container-lg {
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg {
     padding-left: 0;
     padding-right: 0;
   }

apps/site/components/layout/AppHeader.tsx

@@ -100,7 +100,7 @@ function Links() {
 function Body(props: MenuProps) {
   return (
     <div className="fr-header__body">
-      <div className="fr-container">
+      <div className="container">
         <div className="fr-header__body-row">
           <div className="fr-header__brand fr-enlarge-link">
             <Brand {...props} />
@@ -141,7 +141,7 @@ function Menu({ menuOpened, setMenuOpened }: MenuProps) {
       })}
       role={menuOpened ? 'dialog' : undefined}
     >
-      <div className="fr-container">
+      <div className="container">
         <button
           aria-controls="modal-header__menu"
           className="fr-btn fr-btn--close"

apps/site/components/sections/Section.tsx

@@ -15,9 +15,14 @@ const Section = ({
 }: SectionProps): JSX.Element => (
   <section
     id={id}
-    className={classNames('section fr-py-7w', containerClassName)}
+    className={classNames('container section py-7 px-4', containerClassName)}
   >
-    <div className={classNames('fr-container flex flex-col gap-4', className)}>
+    <div
+      className={classNames(
+        'container w-full mx-auto px-4 flex flex-col gap-4',
+        className
+      )}
+    >
       {children}
     </div>
   </section>