layout and contact forme update

css/style.css

@@ -1,111 +1,121 @@
-/* @import url("photographer.css"); */
-
+@import url("photographer.css");
 
 * {
-    font-family: "DM Sans", sans-serif;
-    margin: 0;
-    box-sizing: border-box; 
-    text-decoration: none;  
+  --primary-color: #901C1C;
+  --secondary-color: #D3573C;
+  border: none;
 }
 
-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 90px;
+body {
+  font-family: "DM Sans", sans-serif;
+  margin: 0;
 }
-.logo{
-     cursor: pointer; /* rajout  */
+
+header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 90px;
 }
 
 h1 {
-    color: #901C1C;
-    margin-right: 100px;
+  color: var(--primary-color);
+  margin-right: 100px;
+}
+
+h2,
+h3,
+h4,
+h5 {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  padding-bottom: 50px;
+}
+
+a {
+  cursor: pointer;
 }
 
 .logo {
-    height: 50px;
-    margin-left: 100px;
+  height: 50px;
+  margin-left: 100px;
+}
+
+.photographer_section a:focus-visible {
+  outline: 3px solid var(--secondary-color);
+  border-radius: 100%;
 }
 
 .photographer_section {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 70px;
-    margin-top: 100px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin-top: 100px;
 }
 
+.photographer_section {
+  gap: 70px;
+}
+
+.photographer_section .wrapper {
+  overflow: hidden;
+  border-radius: 100%;
+  outline: 3px solid transparent;
+  transition: outline-color 0.2s ease-out;
+}
+
+.photographer_section .wrapper:hover,
+.photographer_section .wrapper:focus-visible{
+  outline-color: var(--secondary-color);
+  transition: outline-color 0.2s ease-in; 
+}
 
+.photographer_section article {
+  justify-self: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  overflow: visible;
+}
 
-.photographer_section article h2 a {
-    color: #D3573C;
-    font-size: 36px;
-    font-weight: 400;
-    line-height: 47px;
-    letter-spacing: 0em;
-    text-align: center;
-    margin-top: 20px;
-    margin-bottom: 0;
-    cursor: pointer; /* rajout  */
+.photographer_section article h2 {
+  color: var(--secondary-color);
+  font-size: 36px;
+  font-weight: 400;
+}
 
+.photographer_section article h3 {
+  color: var(--primary-color);
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 5px;
+}
+.photographer_section article h4 {
+  color: #000000;
+  font-size: 12px;
+  font-weight: 400;
+  margin-bottom: 5px;
 }
-.photographer_section figure {
-    justify-self: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+.photographer_section article h5 {
+  color: #757575;
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.photographer_section article img {
+  object-fit: cover;
+  overflow-clip-margin: unset;
+  overflow: visible;
 }
 
 .photographer_section article img {
-    height: 200px;
-    width: 200px;
-    object-fit: cover;
-    display: block;
-    border-radius: 50%;
-    overflow: hidden;
-    box-shadow: 0px 4px 12px 0px #00000040;
-    background: #C4C4C4;
-    cursor: pointer;
-    transition: transform 0.3s ease; /* Transition pour une animation fluide */
-
-}
-
-.photographer_section article img:hover {
-    transform: scale(1.1); /* Effet de grossissement */
-}
-
-
-.location{
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 17px;
-    letter-spacing: 0em;
-    text-align: center;
-    color: #901C1C;
-
-}
-.tagline{
-
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 13px;
-    letter-spacing: 0em;
-    text-align: center;
-    margin-top: 2px;
-
-}
-
-.price{
-
-    font-family: DM Sans;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 12px;
-    letter-spacing: 0em;
-    text-align: center;
-    margin-top: 3px;
-    color:#757575;
-
+  transform: scale(1.18);
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
 }