/* ==========================================================================
   KEC CORPORATE
   STYLE PRINCIPAL
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */

:root {
  /* Couleurs */
  --green: #0b8f4d;
  --green-dark: #056b38;
  --green-deep: #034d29;
  --green-light: #eaf8f0;
  --green-soft: #f4fbf7;

  --navy: #102536;
  --text: #172b3d;
  --muted: #66788a;

  --white: #ffffff;
  --black: #07130d;

  --border: #dce8e1;
  --border-light: #e8f0eb;

  /* Ombres */
  --shadow-xs: 0 4px 15px rgba(10, 54, 32, 0.05);
  --shadow-sm: 0 10px 30px rgba(10, 54, 32, 0.07);
  --shadow: 0 22px 60px rgba(10, 54, 32, 0.12);
  --shadow-lg: 0 35px 90px rgba(5, 54, 32, 0.18);

  /* Rayons */
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 32px;

  /* Mise en page */
  --container: 1200px;

  /* Animation */
  --transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  /* Header */
  --header-height: 80px;
}


/* ==========================================================================
   2. POLICES LOCALES INTER
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   3. RESET GLOBAL
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  min-height: 100%;
  margin: 0;

  font-family: "Inter", Arial, sans-serif;

  color: var(--text);
  background: var(--white);

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  color: var(--text);
}

textarea {
  overflow: auto;
}

::selection {
  color: #ffffff;
  background: var(--green);
}


/* ==========================================================================
   4. ACCESSIBILITÉ
   ========================================================================== */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* ==========================================================================
   5. LAYOUT GÉNÉRAL
   ========================================================================== */

.container {
  width: min(
    calc(100% - 40px),
    var(--container)
  );

  margin-inline: auto;
}

.section {
  position: relative;
  padding: 105px 0;
}

.section-head {
  width: 100%;
  max-width: 760px;

  margin: 0 auto 55px;

  text-align: center;
}

.section-label {
  display: inline-block;

  margin-bottom: 12px;

  color: var(--green);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-head h1,
.section-head h2 {
  color: var(--navy);

  font-size: clamp(
    36px,
    5vw,
    58px
  );

  line-height: 1.05;

  letter-spacing: -0.055em;
}

.section-head h1 span,
.section-head h2 span {
  color: var(--green);
}

.section-head p {
  max-width: 720px;

  margin:
    16px auto 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.8;
}


/* ==========================================================================
   6. BOUTONS
   ========================================================================== */

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 50px;

  padding:
    0 20px;

  border:
    1px solid transparent;

  border-radius:
    11px;

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1;

  text-align:
    center;

  transition:
    var(--transition);
}

.btn span {
  flex-shrink: 0;
}

.btn-primary {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--green),
      var(--green-dark)
    );

  box-shadow:
    0 12px 28px rgba(
      11,
      143,
      77,
      0.20
    );
}

.btn-primary:hover {
  color: #ffffff;

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 35px rgba(
      11,
      143,
      77,
      0.26
    );
}

.btn-primary:active {
  transform:
    translateY(-1px);
}

.btn-secondary {
  color: var(--navy);

  border-color:
    var(--border);

  background:
    #ffffff;
}

.btn-secondary:hover {
  color: var(--green);

  border-color:
    rgba(
      11,
      143,
      77,
      0.28
    );

  transform:
    translateY(-3px);

  box-shadow:
    var(--shadow-sm);
}


/* ==========================================================================
   7. PAGE HERO
   ========================================================================== */

.page-hero {
  position: relative;

  min-height:
    430px;

  display:
    flex;

  align-items:
    center;

  padding:
    150px 0 90px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(
        11,
        143,
        77,
        0.12
      ),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #f6fbf8,
      #ffffff
    );
}

.page-hero::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(
        11,
        143,
        77,
        0.03
      ) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(
        11,
        143,
        77,
        0.03
      ) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  opacity:
    0.5;
}

.page-hero-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    820px;
}

.page-hero-content .section-label {
  margin-bottom:
    14px;
}

.page-hero-content h1 {
  color:
    var(--navy);

  font-size:
    clamp(
      42px,
      6vw,
      68px
    );

  line-height:
    1;

  letter-spacing:
    -0.065em;
}

.page-hero-content h1 span {
  color:
    var(--green);
}

.page-hero-content p {
  max-width:
    720px;

  margin-top:
    18px;

  color:
    var(--muted);

  font-size:
    16px;

  line-height:
    1.85;
}


/* ==========================================================================
   8. GRILLES DE CARTES
   ========================================================================== */

.cards-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    20px;
}

.card {
  position:
    relative;

  padding:
    28px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #ffffff;

  box-shadow:
    var(--shadow-sm);

  transition:
    var(--transition);
}

.card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    var(--shadow);

  border-color:
    rgba(
      11,
      143,
      77,
      0.25
    );
}

.card-icon {
  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    18px;

  border-radius:
    15px;

  color:
    var(--green);

  background:
    var(--green-light);

  font-size:
    20px;
}

.card h3 {
  margin-bottom:
    9px;

  color:
    var(--navy);

  font-size:
    19px;

  line-height:
    1.3;
}

.card p {
  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.8;
}


/* ==========================================================================
   9. SECTION 2 COLONNES
   ========================================================================== */

.two-col {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    65px;

  align-items:
    center;
}

.two-col-image {
  position:
    relative;

  overflow:
    hidden;

  border-radius:
    28px;

  background:
    var(--green-light);

  box-shadow:
    var(--shadow-lg);
}

.two-col-image img {
  width:
    100%;

  height:
    480px;

  object-fit:
    cover;

  transition:
    transform .7s ease;
}

.two-col-image:hover img {
  transform:
    scale(1.04);
}

.content-block h2 {
  margin-bottom:
    16px;

  color:
    var(--navy);

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

  line-height:
    1.08;

  letter-spacing:
    -0.055em;
}

.content-block h2 span {
  color:
    var(--green);
}

.content-block p {
  margin-bottom:
    16px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.85;
}


/* ==========================================================================
   10. LISTE CHECK
   ========================================================================== */

.check-list {
  display:
    grid;

  gap:
    13px;

  margin:
    25px 0;
}

.check-item {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;
}

.check-icon {
  width:
    23px;

  height:
    23px;

  flex:
    0 0 23px;

  display:
    grid;

  place-items:
    center;

  margin-top:
    2px;

  border-radius:
    50%;

  background:
    var(--green-light);

  color:
    var(--green);

  font-size:
    10px;

  font-weight:
    900;
}

.check-item strong {
  display:
    block;

  color:
    var(--navy);

  font-size:
    12px;

  line-height:
    1.4;
}

.check-item span {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.5;
}


/* ==========================================================================
   11. PROFIL CORPORATE
   ========================================================================== */

.profile-box {
  display:
    grid;

  grid-template-columns:
    1.05fr .95fr;

  overflow:
    hidden;

  border-radius:
    30px;

  background:
    #ffffff;

  box-shadow:
    var(--shadow);
}

.profile-content {
  padding:
    58px;
}

.profile-content h2 {
  margin:
    12px 0 16px;

  color:
    var(--navy);

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

  line-height:
    1.08;

  letter-spacing:
    -.055em;
}

.profile-content h2 span {
  color:
    var(--green);
}

.profile-content p {
  margin-bottom:
    22px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.85;
}

.profile-stats {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    12px;

  margin:
    25px 0;
}

.profile-stat {
  padding:
    15px;

  border:
    1px solid var(--border);

  border-radius:
    15px;

  background:
    var(--green-soft);
}

.profile-stat strong {
  display:
    block;

  color:
    var(--green-dark);

  font-size:
    20px;

  font-weight:
    900;
}

.profile-stat span {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .06em;
}

.profile-image {
  position:
    relative;

  min-height:
    500px;

  overflow:
    hidden;
}

.profile-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.profile-image::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to top,
      rgba(
        3,
        35,
        20,
        .75
      ),
      transparent 60%
    );

  pointer-events:
    none;
}


/* ==========================================================================
   12. SERVICES DÉTAILLÉS
   ========================================================================== */

.service-detail {
  display:
    grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:
    65px;

  align-items:
    center;
}

.service-detail.reverse {
  grid-template-columns:
    1.15fr .85fr;
}

.service-detail .image {
  overflow:
    hidden;

  border-radius:
    28px;

  background:
    var(--green-light);

  box-shadow:
    var(--shadow-lg);
}

.service-detail .image img {
  width:
    100%;

  height:
    430px;

  object-fit:
    cover;

  transition:
    transform .7s ease;
}

.service-detail:hover .image img {
  transform:
    scale(1.04);
}

.service-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 12px;

  border-radius:
    999px;

  background:
    var(--green-light);

  color:
    var(--green-dark);

  font-size:
    9px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;
}

.service-detail h2 {
  margin:
    14px 0;

  color:
    var(--navy);

  font-size:
    clamp(
      32px,
      4vw,
      48px
    );

  line-height:
    1.08;

  letter-spacing:
    -.055em;
}

.service-detail h2 span {
  color:
    var(--green);
}

.service-detail p {
  margin-bottom:
    17px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.85;
}


/* ==========================================================================
   13. GALERIE / RÉALISATIONS
   ========================================================================== */

.gallery-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    18px;
}

.gallery-item {
  position:
    relative;

  height:
    280px;

  overflow:
    hidden;

  border-radius:
    22px;

  background:
    #102536;
}

.gallery-item.large {
  grid-column:
    span 2;
}

.gallery-item img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .7s ease;
}

.gallery-item:hover img {
  transform:
    scale(1.07);
}

.gallery-overlay {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    flex-end;

  padding:
    21px;

  color:
    #ffffff;

  background:
    linear-gradient(
      to top,
      rgba(
        3,
        30,
        18,
        .8
      ),
      transparent 62%
    );
}

.gallery-overlay span {
  display:
    block;

  color:
    rgba(
      255,
      255,
      255,
      .65
    );

  font-size:
    9px;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;
}

.gallery-overlay h3 {
  margin-top:
    4px;

  font-size:
    18px;

  line-height:
    1.25;
}


/* ==========================================================================
   14. ACTUALITÉS
   ========================================================================== */

.news-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    20px;
}

.news-card {
  overflow:
    hidden;

  border:
    1px solid var(--border);

  border-radius:
    22px;

  background:
    #ffffff;

  transition:
    var(--transition);
}

.news-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    var(--shadow);
}

.news-card img {
  width:
    100%;

  height:
    220px;

  object-fit:
    cover;
}

.news-content {
  padding:
    22px;
}

.news-meta {
  color:
    var(--green);

  font-size:
    9px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;
}

.news-content h3 {
  margin:
    9px 0;

  color:
    var(--navy);

  font-size:
    18px;

  line-height:
    1.3;
}

.news-content p {
  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.75;
}


/* ==========================================================================
   15. FAQ
   ========================================================================== */

.faq-list {
  width:
    100%;

  max-width:
    880px;

  margin:
    0 auto;

  display:
    grid;

  gap:
    12px;
}

.faq-item {
  overflow:
    hidden;

  border:
    1px solid var(--border);

  border-radius:
    16px;

  background:
    #ffffff;

  transition:
    var(--transition);
}

.faq-item:hover {
  border-color:
    rgba(
      11,
      143,
      77,
      .22
    );

  box-shadow:
    var(--shadow-xs);
}

.faq-item summary {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    18px 20px;

  color:
    var(--navy);

  font-size:
    12px;

  font-weight:
    800;

  cursor:
    pointer;

  list-style:
    none;
}

.faq-item summary::-webkit-details-marker {
  display:
    none;
}

.faq-item summary span {
  flex:
    0 0 auto;

  color:
    var(--green);

  font-size:
    20px;

  transition:
    transform .3s ease;
}

.faq-item[open] summary span {
  transform:
    rotate(45deg);
}

.faq-item p {
  padding:
    0 20px 20px;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.8;
}


/* ==========================================================================
   16. CONTACT
   ========================================================================== */

.contact-grid {
  display:
    grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap:
    60px;

  align-items:
    start;
}

.contact-list {
  display:
    grid;

  gap:
    16px;

  margin-top:
    25px;
}

.contact-item {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}

.contact-icon {
  width:
    43px;

  height:
    43px;

  flex:
    0 0 43px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    12px;

  background:
    var(--green-light);

  color:
    var(--green);
}

.contact-item strong {
  display:
    block;

  color:
    var(--navy);

  font-size:
    11px;
}

.contact-item span {
  display:
    block;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.5;
}

.contact-form {
  padding:
    30px;

  border:
    1px solid var(--border);

  border-radius:
    24px;

  background:
    #ffffff;

  box-shadow:
    var(--shadow-sm);
}

.form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    15px;
}

.form-group {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}

.form-group.full {
  grid-column:
    1 / -1;
}

.form-group label {
  color:
    var(--navy);

  font-size:
    10px;

  font-weight:
    800;
}

.form-group input,
.form-group textarea,
.form-group select {
  width:
    100%;

  min-height:
    46px;

  padding:
    13px 14px;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  outline:
    none;

  background:
    #fbfdfc;

  color:
    var(--text);

  font-size:
    11px;

  transition:
    var(--transition);

  appearance:
    none;
}

.form-group textarea {
  min-height:
    135px;

  resize:
    vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color:
    #94a3b8;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color:
    rgba(
      11,
      143,
      77,
      .45
    );

  background:
    #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(
      11,
      143,
      77,
      .07
    );
}


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.footer {
  padding:
    65px 0 25px;

  color:
    #ffffff;

  background:
    #071a10;
}

.footer-grid {
  display:
    grid;

  grid-template-columns:
    1.5fr repeat(3, 1fr);

  gap:
    40px;

  padding-bottom:
    40px;
}

.footer-brand p {
  max-width:
    320px;

  margin-top:
    15px;

  color:
    rgba(
      255,
      255,
      255,
      .5
    );

  font-size:
    11px;

  line-height:
    1.8;
}

.footer-column h4 {
  margin-bottom:
    14px;

  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    800;
}

.footer-column a {
  display:
    block;

  margin-bottom:
    9px;

  color:
    rgba(
      255,
      255,
      255,
      .52
    );

  font-size:
    10px;

  transition:
    var(--transition);
}

.footer-column a:hover {
  color:
    #ffffff;

  transform:
    translateX(3px);
}

.footer-bottom {
  padding-top:
    20px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}

.footer-bottom span {
  color:
    rgba(
      255,
      255,
      255,
      .35
    );

  font-size:
    9px;
}


/* ==========================================================================
   18. ANIMATIONS
   ========================================================================== */

.reveal {
  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(
      .22,
      1,
      .36,
      1
    );
}

.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* ==========================================================================
   19. BACK TO TOP
   ========================================================================== */

.back-top {
  position:
    fixed;

  right:
    20px;

  bottom:
    20px;

  z-index:
    900;

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  color:
    #ffffff;

  background:
    var(--green);

  box-shadow:
    0 12px 28px
    rgba(
      11,
      143,
      77,
      .25
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(15px);

  transition:
    var(--transition);
}

.back-top.visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}

.back-top:hover {
  transform:
    translateY(-3px);
}


/* ==========================================================================
   20. BREADCRUMB
   ========================================================================== */

.breadcrumb {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    18px;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    600;
}

.breadcrumb a:hover {
  color:
    var(--green);
}

.breadcrumb .current {
  color:
    var(--green);
  font-weight:
    800;
}


/* ==========================================================================
   21. RESPONSIVE TABLET
   ========================================================================== */

@media (max-width: 1100px) {

  .cards-grid,
  .news-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .gallery-item.large {
    grid-column:
      span 1;
  }

  .two-col,
  .contact-grid,
  .profile-box,
  .service-detail,
  .service-detail.reverse {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }

  .profile-image {
    min-height:
      420px;
  }

  .service-detail .image img {
    height:
      400px;
  }

  .footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }
}


/* ==========================================================================
   22. TABLET / MENU MOBILE
   ========================================================================== */

@media (max-width: 900px) {

  .container {
    width:
      min(
        calc(100% - 32px),
        var(--container)
      );
  }

  .section {
    padding:
      90px 0;
  }

  .page-hero {
    min-height:
      390px;

    padding:
      135px 0 70px;
  }

  .profile-content {
    padding:
      45px;
  }
}


/* ==========================================================================
   23. MOBILE
   ========================================================================== */

@media (max-width: 600px) {

  :root {
    --container:
      1200px;
  }

  .container {
    width:
      min(
        calc(100% - 28px),
        var(--container)
      );
  }

  .section {
    padding:
      75px 0;
  }

  .section-head {
    margin-bottom:
      38px;
  }

  .section-head h1,
  .section-head h2 {
    font-size:
      clamp(
        30px,
        9vw,
        42px
      );
  }

  .page-hero {
    min-height:
      auto;

    padding:
      125px 0 65px;
  }

  .page-hero-content h1 {
    font-size:
      clamp(
        38px,
        11vw,
        52px
      );
  }

  .page-hero-content p {
    font-size:
      13px;
  }

  .cards-grid,
  .news-grid,
  .gallery-grid,
  .form-grid,
  .profile-stats {
    grid-template-columns:
      1fr;
  }

  .form-group.full {
    grid-column:
      auto;
  }

  .gallery-item {
    height:
      240px;
  }

  .two-col-image img {
    height:
      370px;
  }

  .profile-content {
    padding:
      32px 24px;
  }

  .profile-image {
    min-height:
      350px;
  }

  .service-detail .image img {
    height:
      330px;
  }

  .contact-form {
    padding:
      22px;
  }

  .footer-grid {
    grid-template-columns:
      1fr;
  }

  .footer-bottom {
    flex-direction:
      column;

    align-items:
      center;

    text-align:
      center;
  }

  .btn {
    min-height:
      48px;

    padding:
      0 17px;

    font-size:
      11px;
  }
}


/* ==========================================================================
   24. TRÈS PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 380px) {

  .container {
    width:
      calc(100% - 22px);
  }

  .section {
    padding:
      65px 0;
  }

  .page-hero {
    padding:
      115px 0 55px;
  }

  .two-col-image img {
    height:
      300px;
  }

  .gallery-item {
    height:
      215px;
  }

  .profile-content {
    padding:
      28px 20px;
  }

  .contact-form {
    padding:
      18px;
  }

  .back-top {
    right:
      14px;

    bottom:
      14px;
  }
}


/* ==========================================================================
   25. ACCESSIBILITÉ / MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

  .reveal {
    opacity:
      1;

    transform:
      none;
  }
}


/* ==========================================================================
   26. FOCUS CLAVIER
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline:
    3px solid
    rgba(
      11,
      143,
      77,
      .25
    );

  outline-offset:
    3px;
}


/* ==========================================================================
   27. ÉTAT DÉSACTIVÉ
   ========================================================================== */

button:disabled,
.btn:disabled {
  opacity:
    .55;

  cursor:
    not-allowed;

  transform:
    none !important;

  box-shadow:
    none !important;
}