Rétabli fr-container et enlève la class section qui n'est pas définie

Author: cparthur

apps/site/app/global.css

@@ -2,34 +2,29 @@
 @import '@/ui/global.css';
 
 /*** CSS spécifique au site ***/
-
-.container {
-  @apply px-6;
-}
-
 @media (min-width: 78em) {
-  .container,
-  .container-sm,
-  .container-md,
-  .container-lg {
+  .fr-container,
+  .fr-container-sm,
+  .fr-container-md,
+  .fr-container-lg {
     max-width: 100%;
   }
 }
 
 @media (min-width: 1280px) {
-  .container,
-  .container-sm,
-  .container-md,
-  .container-lg {
+  .fr-container,
+  .fr-container-sm,
+  .fr-container-md,
+  .fr-container-lg {
     max-width: 1280px;
   }
 }
 
 @media (min-width: 1350px) {
-  .container,
-  .container-sm,
-  .container-md,
-  .container-lg {
+  .fr-container,
+  .fr-container-sm,
+  .fr-container-md,
+  .fr-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="container">
+      <div className="fr-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="container">
+      <div className="fr-container">
         <button
           aria-controls="modal-header__menu"
           className="fr-btn fr-btn--close"

apps/site/components/sections/Section.tsx

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