/* ==========================================================================
   Baudry Antiquités : feuille de style (reproduction fidèle de l'ancien thème)
   ========================================================================== */

/* ---------- Polices hébergées localement (aucun appel à Google Fonts) ---------- */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-condensed-latin-400-normal.woff2") format("woff2"); }

:root {
  --bordeaux: #732121;
  --bordeaux-sep: #752121;
  --bleu: #216675;
  --bleu-hover: #1a5360;
  --clair: #efefef;
  --blanc-casse: #f6f6f6;
  --texte: #141719;
  --gris-fond: #e0dede;
  --anthracite: #272c30;
  --noir-bois: #1f2326;
  --pied: #141719;
  --hh: 144px;                     /* hauteur de l'en-tête */
  --f-texte: "Open Sans", Arial, Helvetica, sans-serif;
  --f-titre: "Roboto", Arial, Helvetica, sans-serif;
  --f-menu: "Roboto Condensed", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Barre de défilement fine et sombre, comme sur l'ancien site */
html { scrollbar-width: thin; scrollbar-color: #303030 #545454; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #545454; }
html::-webkit-scrollbar-thumb { background-color: #303030; border-radius: 5px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--f-texte); font-size: 15px; line-height: 1.72; color: var(--clair); background: var(--noir-bois); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; transition: color .2s linear, background-color .2s linear, border-color .2s linear; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 400; margin: 0; }
/* Reprise de la « typographie responsive » d'Avada : même formule, mêmes réglages (sensibilité 0,54, facteur 1,5) */
.section-title, .slide h2, .about-text h2, .flip-front h2, .flip-back h2, .contact h2, .legal-content h2 { --rt-s: .54; --rt-min: 22.5; --rt-max: 1099; font-size: calc(var(--fs) * 1px); }
@media (max-width: 1099px) { .section-title, .slide h2, .about-text h2, .flip-front h2, .flip-back h2, .contact h2, .legal-content h2 { font-size: calc(var(--fs) * 1px - var(--rt-s) * (var(--fs) - min(var(--rt-min), var(--fs))) * (var(--rt-max) * 1px - 100vw) / (var(--rt-max) - 360)); } }
@media (max-width: 800px) { .section-title, .slide h2, .about-text h2, .flip-front h2, .flip-back h2, .contact h2, .legal-content h2 { --rt-max: 800; } }
p { margin: 0 0 20px; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: #000; padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }
:focus-visible { outline: 2px solid #9fc9d3; outline-offset: 2px; }

.container { width: 100%; max-width: 1230px; margin: 0 auto; padding: 0 30px; }

/* ---------- En-tête ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(115, 33, 33, .9); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.logo { flex: 0 0 25%; }
.logo img { width: min(250px, calc(100% - 10px)); height: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 45px; }
.main-nav a { display: block; font-family: var(--f-menu); font-size: 17px; line-height: 29.24px; padding: 19px 0 20px; color: var(--blanc-casse); transition: color .3s cubic-bezier(.42, .01, .58, 1), background-color .3s cubic-bezier(.42, .01, .58, 1); }
.main-nav a:hover { color: var(--blanc-casse); }
.main-nav a.is-current { color: var(--bleu); -webkit-text-stroke: .45px currentColor; } /* compense l'effet « plus fin » du bleu sur fond bordeaux */
.menu-toggle { display: none; background: none; border: 0; color: var(--blanc-casse); font-size: 40px; width: 80px; height: 64px; cursor: pointer; padding: 12px 20px; }
/* Icône du menu mobile : mêmes tracés et même animation que l'original (rotation 360° + fondu, 0,3 s) */
.mt-icon { position: relative; display: block; width: 1em; height: 1em; }
.mt-icon .ico { position: absolute; left: 0; top: .02em; width: 1em; height: 1em; opacity: 0; transform: rotate(0deg); transition: all .3s cubic-bezier(.42, .01, .58, 1); }
.mt-icon .ico-open { opacity: 1; }
.menu-toggle[aria-expanded="true"] .mt-icon .ico { transform: rotate(360deg); }
.menu-toggle[aria-expanded="true"] .ico-open { opacity: 0; }
.menu-toggle[aria-expanded="true"] .ico-close { opacity: 1; }

/* ---------- Boutons (style « 3D » de l'ancien thème) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--f-menu); text-transform: uppercase; color: var(--clair); background: var(--bleu); border: 0; border-radius: 4px; cursor: pointer; transition: color .2s, font-size .2s, background-color .2s, border-color .2s, border-radius .2s, box-shadow .2s, opacity .2s, transform .2s; }
.btn:hover, .btn:focus, .btn:active { color: var(--clair); background: var(--bleu); }
.btn-small { font-size: 12px; line-height: 12px; padding: 9px 20px; box-shadow: inset 0 1px 0 #fff, 0 1.8px 0 var(--bleu), 1.2px 2.4px 2.4px 1.8px rgba(0,0,0,.3); }
.btn-large { font-size: 18px; line-height: 21px; padding: 17px 40px; box-shadow: inset 0 1px 0 #fff, 0 2.7px 0 var(--bleu), 1.8px 3.6px 3.6px 2.7px rgba(0,0,0,.3); }
.btn-large .ico { font-size: 18px; }
.btn-submit { font-size: 14px; line-height: 14px; padding: 17px 40px; box-shadow: inset 0 1px 0 #fff, 0 2.1px 0 var(--bleu), 1.4px 2.8px 2.8px 2.1px rgba(0,0,0,.3); }
.btn-submit[disabled] { opacity: .6; cursor: wait; }

/* ---------- Diaporama ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #111; }
.hero-track { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; min-height: 480px; z-index: 0; }
.hero-track.is-past { visibility: hidden; }
/* Comme sur l'ancien site : le diaporama reste immobile et la page glisse par-dessus */
main > section:not(.hero), .site-footer { position: relative; z-index: 1; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; opacity: 0; transition: opacity .6s ease; display: flex; align-items: center; justify-content: center; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide-content { width: 100%; max-width: 1230px; text-align: center; padding: 50px 30px 0; }
.slide h2 { --fs: 50; --rt-s: .5 !important; line-height: 1.2; color: #fff; margin: 0 0 14px; }
.slide-btn { padding-top: 3.25%; } /* marge du bouton de l'original : 3,25 % de la largeur */

/* ---------- Titres de section ---------- */
.section-title { --fs: 46; line-height: 1.04; text-align: center; }
/* Dans l'original, ces colonnes ont 2 % de marge à droite : titres légèrement décalés à gauche */
.col-shift { margin-right: 2%; }
.sep { width: 150px; border-top: 1px solid var(--bordeaux-sep); margin: 40px auto 45px; }
section[id] { scroll-margin-top: var(--hh); }
#home { scroll-margin-top: 0; }

/* ---------- Qui sommes-nous ---------- */
.about { background: var(--gris-fond); padding: 86px 0 0; color: var(--texte); }
.about .section-title { color: #333; }
.about-text { text-align: center; font-size: 17px; line-height: 1.72; }
.about-text h2 { --fs: 24; line-height: 1.04; color: var(--bleu); margin: 0 0 1.1em; }
.about-text a { color: var(--bleu); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 4%; margin-top: 40px; }
.feature { text-align: center; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--texte); background: var(--bordeaux-sep); color: var(--blanc-casse); font-size: 28.16px; margin-bottom: 1px; }
.feature p { font-size: 24px; line-height: 41.28px; margin: 0 0 20px; }
.about-img { display: flex; justify-content: center; margin-top: 69px; }
.about-img img { width: 566px; }

/* ---------- Nos expertises (cartes qui se retournent) ---------- */
.expertises { background: var(--anthracite); padding: 100px 0 85px; }
.expertises .section-title { color: var(--clair); }
.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 30px; margin: 120px 0 50px; }
.expertises .col-shift + .flip-grid { margin-top: 91px; }
/* Reprise exacte de l'effet « classic / flip-right » de l'ancien thème Avada (0,4 s, léger rebond) */
.flip-box { position: relative; z-index: 1; height: var(--flip-h, 177px); outline: none; cursor: default; backface-visibility: hidden; transform: translate3d(0, 0, 0); }
.flip-inner { position: relative; width: 100%; height: 100%; perspective: 1000px; }
.flip-front, .flip-back { position: absolute; inset: 0; border-radius: 4px; padding: 27px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; perspective: 1000px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-clip: padding-box; transition: transform .4s cubic-bezier(.2, .85, .4, 1.275); }
.flip-front { z-index: 10; background-color: #f5f5f5; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; transform: rotateY(0deg); }
.flip-front h2 { --fs: 24; line-height: 1.04; color: var(--blanc-casse); }
.flip-back { z-index: -1; background: var(--bleu); transform: rotateY(-180deg); }
.flip-back h2 { --fs: 24; line-height: 1.04; color: var(--clair); margin: 0 0 1.1em; }
.flip-back strong { font-weight: 700; }
.flip-back-inner { width: 100%; }
.flip-back p { font-size: 15px; line-height: 25.8px; color: #ededed; margin: 0 0 20px; }
.flip-box:hover .flip-front, .flip-box:focus-within .flip-front, .flip-box.is-flipped .flip-front { z-index: -1; transform: rotateY(180deg); }
.flip-box:hover .flip-back, .flip-box:focus-within .flip-back, .flip-box.is-flipped .flip-back { z-index: 1; transform: rotateY(0deg); }

/* ---------- Contact ---------- */
.contact { padding: 110px 0 100px; background: var(--noir-bois) url("../img/dark_wood1.jpg") 0 0 / cover fixed; text-align: center; }
.contact .section-title { color: var(--clair); }
.contact-intro { font-size: 15px; line-height: 25.8px; margin: 29px 0 0; }
.contact h2 { --fs: 24; line-height: 1.04; color: var(--clair); margin: 0 0 20px; }
.contact .btn-large + h2, .contact .whatsapp + h2 { margin-top: 40px; }
.contact .btn-large + h2 + .whatsapp + h2 { margin-bottom: 15px; }
.whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 40px; background: #58b250; color: var(--clair); font-size: 30px; transition: color .2s linear, background-color .2s linear, border-color .2s linear; }
.whatsapp:hover { color: var(--clair); }

.contact-form { width: 58.41%; margin: 0 auto 35px; text-align: left; }
.field { position: relative; margin-bottom: 30px; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form textarea {
  width: 100%; height: 40px; padding: 0 13px; font: 13px var(--f-texte); color: var(--gris-fond);
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.05); border-radius: 0; outline: none; transition: all .2s; -webkit-appearance: none; appearance: none;
}
.contact-form textarea { height: 100px; padding: 13px; resize: vertical; display: block; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--gris-fond); opacity: 1; }
/* Comme l'original : le contour ne change pas au focus */
.contact-form .is-invalid { border-color: #d9534f !important; }
.field-icon > .ico { position: absolute; left: 13px; top: 13px; font-size: 13px; color: var(--gris-fond); pointer-events: none; }
.field-icon input { padding-left: 32.5px !important; }
.hp { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; overflow: hidden; }

.upload-field { margin-bottom: 30px; }
.upload-label { display: inline-block; font-size: 15px; line-height: 25.8px; margin-bottom: 9.75px; color: var(--clair); }
.tooltip { position: relative; display: inline-block; margin-left: 6px; font-size: 15px; color: var(--clair); cursor: help; }
.tooltip-content { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px; background: #333; color: #fff; font-size: 13px; line-height: 1.4; padding: 6px 10px; border-radius: 3px; opacity: 0; visibility: hidden; transition: opacity .2s; }
.tooltip:hover .tooltip-content, .tooltip:focus .tooltip-content { opacity: 1; visibility: visible; }
.dropzone { position: relative; height: 134px; display: flex; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgba(255,255,255,.05); transition: border-color .2s; }
/* Comme l'ancien site : pointillés très discrets, plus visibles au survol du champ */
.upload-field:hover .dropzone, .dropzone.is-over, .dropzone:focus-within { border-color: rgba(255,255,255,.5); }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dz-inner { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13.33px; color: var(--clair); }
.dz-inner .ico { font-size: 24px; }
.file-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.file-list:empty { display: none; }
.file-list li { position: relative; font-size: 11px; line-height: 1.3; color: #ccc; word-break: break-all; }
.file-list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; margin-bottom: 4px; }
.file-list button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; padding: 0; }
.file-total { grid-column: 1 / -1; font-size: 12px; color: #bbb; }
.file-total.is-over { color: #ff8c87; }

.form-notice { margin: 0 0 25px; padding: 14px 18px; border-radius: 4px; font-size: 14px; line-height: 1.5; text-align: left; }
.form-notice.is-success { background: rgba(88,178,80,.18); border: 1px solid rgba(88,178,80,.6); color: #dff3dc; }
.form-notice.is-error { background: rgba(217,83,79,.18); border: 1px solid rgba(217,83,79,.6); color: #f8d7d6; }
.form-notice a { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--pied); padding: 60px; text-align: center; }
.site-footer .container { max-width: none; padding: 0; }
.site-footer p { max-width: 48.04%; margin-left: auto !important; margin-right: auto !important; }
/* Première ligne un peu plus large pour garder « Gérer les cookies » sur la même ligne sur grand écran */
.site-footer p:first-child { max-width: 54%; }
.site-footer p { font-size: 14px; line-height: 24.08px; color: #8c8989; margin: 14px 0; }
.site-footer p + p { margin-top: 28px; }

.to-top { position: fixed; right: 75px; bottom: 0; z-index: 90; width: 48px; height: 35px; display: flex; align-items: center; justify-content: center; background: #333; color: #fff; border-radius: 4px 4px 0 0; font-size: 22px; opacity: 0; visibility: hidden; transition: opacity .4s ease-in-out, background .2s ease-in-out, visibility .4s; }
.to-top.is-visible { opacity: .9; visibility: visible; }
.to-top:hover, .to-top:focus { color: #fff; background: #333; }

/* ---------- Pages légales ---------- */
body.legal { background: var(--noir-bois); }
.legal-main { padding: calc(var(--hh) + 55px) 0 40px; min-height: 60vh; }
.legal-content { color: var(--clair); }
.legal-content h2 { --fs: 24; line-height: 1.04; color: var(--clair); margin: 26px 0 20px; }
.legal-content h3 { font-size: 18px; line-height: 1.3; color: var(--clair); margin: 22px 0 12px; }
.legal-content ul { margin: 0 0 20px; padding-left: 22px; }
.legal-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; }
.legal-content th, .legal-content td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; }
.legal-content th { color: #fff; font-weight: 700; }
.legal-content .btn-small { margin-bottom: 20px; }
.legal-content .cb-table { font-size: 14px; margin-bottom: 24px; }
.legal-content .cb-table th, .legal-content .cb-table td { border-top-color: rgba(255,255,255,.12); padding: 8px 10px 8px 0; }

/* ---------- Bandeau cookies ---------- */
.cookie-banner { position: fixed; right: 10px; bottom: 10px; z-index: 1000; width: 526px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow: auto; background: #fff; color: #222; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23); padding: 20px 20px 14px; font-family: var(--f-texte); font-size: 12px; line-height: 1.5; }
.cookie-banner[hidden] { display: none; }
.cb-head { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 12px; }
.cb-title { margin: 0; font-size: 15px; font-weight: 700; }
.cb-close { position: absolute; right: -6px; top: -8px; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: #333; padding: 4px 8px; }
.cb-text { margin: 0 0 14px; }
.cb-cats { margin-bottom: 14px; display: grid; gap: 8px; }
.cb-cat { background: #f2f2f2; border-radius: 5px; padding: 0 12px; }
.cb-cat summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; cursor: pointer; font-weight: 700; font-size: 13px; list-style: none; }
.cb-cat summary::-webkit-details-marker { display: none; }
.cb-cat p { margin: 0 0 12px; font-size: 12px; }
.cb-always { color: #2e7d32; font-weight: 400; font-size: 12px; }
.cb-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.cb-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.cb-switch span { position: absolute; inset: 0; background: #bbb; border-radius: 22px; transition: background .2s; cursor: pointer; }
.cb-switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.cb-switch input:checked + span { background: #1e73be; }
.cb-switch input:checked + span::before { transform: translateX(18px); }
.cb-switch input:focus-visible + span { outline: 2px solid #1e73be; outline-offset: 2px; }
.cb-buttons { display: flex; gap: 10px; }
.cb-btn { flex: 1; min-height: 45px; padding: 10px; border-radius: 6px; font: 15px var(--f-texte); cursor: pointer; transition: background-color .2s, border-color .2s; }
/* « Tout accepter » et « Tout refuser » : strictement le même style (exigence APD) */
.cb-main { background: #216675; border: 1px solid #216675; color: #fff; font-weight: 700; }
.cb-main:hover { background: #1a5360; border-color: #1a5360; }
.cb-alt { background: #fff; border: 1px solid #c9c9c9; color: #333; }
.cb-alt:hover { background: #f2f2f2; }
.cb-text p { margin: 0 0 8px; }
.cb-text ul { margin: 0 0 8px; padding-left: 18px; }
.cb-text li { margin: 2px 0; }
.cb-text a, .cb-cat a { color: #216675; text-decoration: underline; }
.cb-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 11px; line-height: 1.4; }
.cb-table th, .cb-table td { text-align: left; padding: 4px 6px 4px 0; border-top: 1px solid #ddd; vertical-align: top; }
.cb-table th { font-weight: 700; }
.cb-links { display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; }
.cb-links a { color: #333; text-decoration: underline; font-size: 12px; }

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
/* Diaporama : fixe au-dessus de 975 px, défile normalement en dessous (comme l'original) */
@media (max-width: 975px) {
  .hero-track { position: absolute; height: 100%; min-height: 0; }
}

/* Menu « burger » sous 878 px (réglage de l'original) */
@media (max-width: 878px) {
  .menu-toggle { display: block; }
  .main-nav { position: absolute; top: calc(100% - 12px); left: 0; right: 0; background: #2e2e2e; opacity: 0; pointer-events: none; z-index: -1; transition: all .3s cubic-bezier(.42, .01, .58, 1); }
  .main-nav.is-open { opacity: 1; pointer-events: auto; z-index: 10; }
  .main-nav:not(.is-open) a { visibility: hidden; transition: visibility 0s .3s; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-bottom: 1px solid transparent; }
  .main-nav a, .main-nav a:hover { display: flex; align-items: center; height: 65px; padding: 0 25.5px; color: var(--bleu); -webkit-text-stroke: 0; }
  .main-nav a.is-current { background: var(--bleu); color: var(--blanc-casse); -webkit-text-stroke: 0; }
  .contact { background-attachment: scroll; }
}

@media (max-width: 800px) {
  .header-inner { padding-top: 15px; padding-bottom: 15px; }
  .logo { flex-basis: 75%; }
  /* Sous 800 px, le diaporama commence sous l'en-tête */
  .hero { margin-top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); }
  .slide h2 { margin-bottom: 34px; }
  .col-shift { margin-right: 0; }
  .features { grid-template-columns: 1fr; row-gap: 20px; }
  .slide .btn-large { line-height: 14px; }
  .about .sep { margin-top: 30px; }
  .expertises .sep { margin: 20px auto 0; }
  .expertises .col-shift + .flip-grid { margin-top: 100px !important; }
  .flip-grid { grid-template-columns: 1fr; }
  .contact { padding: 82px 0 72px; }
  .contact-intro { margin-top: 20px; }
  .contact .sep { margin: 30px auto 55px; }
  .contact h2 { margin-bottom: 40px; }
  .contact .btn-large + h2 + .whatsapp + h2 { margin-bottom: 35px; }
  .site-footer p:last-child { margin-bottom: 34px; }
  .contact-form { width: 100%; }
  .site-footer p, .site-footer p:first-child { max-width: none; }
  .to-top { right: 75px; bottom: 30px; width: 44px; height: 44px; border-radius: 4px; }
}

@media (max-width: 560px) {
  .about-img img { width: 100%; }
  .cookie-banner { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; padding: 16px 14px 12px; }
  .cb-buttons { flex-direction: column; gap: 8px; }
  .cb-btn { min-height: 42px; }
  .cb-table { font-size: 10.5px; }
}