/* =============================================================================
   public/css/style.css
   Rôle : Styles principaux du site front
   Architecture :
     1. Variables CSS
     2. Base & typographie
     3. Utilitaires (container, boutons, flash, page-header, breadcrumb)
     4. Navigation (sticky, rétrécit au scroll, dropdown)
     5. Hero (parallax desktop)
     6. Services
     7. Réassurance (bandeau doré)
     8. À propos
     9. Actualités (aperçu home + page liste + pagination)
     10. CTA Contact (image de fond)
     11. Article individuel
     12. Page contact
     13. Pages légales
     14. Footer
     15. Pages d'erreur
     16. Animations
     17. Responsive (48rem mobile, 48-64rem tablette)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. VARIABLES CSS
   ----------------------------------------------------------------------------- */
:root {

    /* --- COULEURS PRINCIPALES --- */
    --color-primary        : #1e3c7a;
    --color-primary-dark   : #122450;
    --color-primary-light  : #e8eef8;
    --color-secondary      : #9a7010;

    /* --- COULEURS NEUTRES --- */
    --color-bg             : #f4ede0;
    --color-bg-alt         : #ede4d4;
    --color-bg-card        : #faf6ee;
    --color-bg-elevated    : #f7f2e8;
    --color-text           : #2a1e10;
    --color-text-muted     : #5a4a30;
    --color-text-faint     : #8a7850;
    --color-border         : #c4a87c;
    --color-border-light   : #d4bc90;
    --color-white          : #ffffff;

    /* --- COULEURS FEEDBACK --- */
    --color-success        : #2d7a4f;
    --color-error          : #c0392b;
    --color-warning        : #b97a10;
    --color-info           : #1a6fa8;

    /* --- TYPOGRAPHIE --- */
    --font-primary         : 'Cinzel', 'Palatino Linotype', Georgia, serif;
    --font-secondary       : 'EB Garamond', 'Palatino Linotype', Georgia, serif;
    --font-size-xs         : 0.75rem;
    --font-size-sm         : 0.875rem;
    --font-size-base       : 1rem;
    --font-size-md         : 1.125rem;
    --font-size-lg         : 1.5rem;
    --font-size-xl         : 2rem;
    --font-size-2xl        : 2.5rem;
    --font-size-3xl        : 3.5rem;
    --font-weight-normal   : 400;
    --font-weight-medium   : 500;
    --font-weight-semibold : 600;
    --font-weight-bold     : 700;
    --line-height-tight    : 1.2;
    --line-height-normal   : 1.6;
    --line-height-relaxed  : 1.85;

    /* --- ESPACEMENTS --- */
    --space-xs             : 0.25rem;
    --space-sm             : 0.5rem;
    --space-md             : 1rem;
    --space-lg             : 1.5rem;
    --space-xl             : 2.5rem;
    --space-2xl            : 4rem;
    --space-3xl            : 6rem;

    /* --- MISE EN PAGE --- */
    --container-width      : 75rem;
    --container-padding    : 1.5rem;
    --navbar-height        : 4.5rem;
    --navbar-height-small  : 3.5rem;

    /* --- BORDURES & RAYONS --- */
    --radius-sm            : 2px;
    --radius-md            : 4px;
    --radius-lg            : 6px;
    --radius-xl            : 8px;
    --radius-full          : 9999px;

    /* --- OMBRES --- */
    --shadow-sm            : 0 2px 8px rgba(30, 18, 4, 0.08);
    --shadow-md            : 0 6px 20px rgba(30, 18, 4, 0.12);
    --shadow-lg            : 0 12px 40px rgba(30, 18, 4, 0.18);
    --shadow-gold          : 0 4px 24px rgba(154, 112, 16, 0.18);
    --shadow-gold-hover    : 0 6px 32px rgba(154, 112, 16, 0.28);

    /* --- TRANSITIONS --- */
    --transition-fast      : 0.15s ease;
    --transition-normal    : 0.3s ease;
    --transition-slow      : 0.5s ease;

    /* --- HERO / CTA --- */
    --hero-height          : 100vh;
    --hero-overlay         : rgba(0, 0, 0, 0.65);
    --cta-overlay          : rgba(0, 0, 0, 0.60);

    /* --- DÉGRADÉS --- */
    --gradient-brand       : linear-gradient(135deg, #ede4d4 0%, #f4ede0 100%);
    --gradient-gold        : linear-gradient(135deg, var(--color-secondary) 0%, #6b5010 100%);
    --gradient-gold-shine  : linear-gradient(135deg, #b88c1a 0%, #7a5c10 50%, #9a7010 100%);
}


/* -----------------------------------------------------------------------------
   2. BASE & TYPOGRAPHIE
   ----------------------------------------------------------------------------- */

body {
    font-family      : var(--font-secondary);
    font-size        : var(--font-size-base);
    font-weight      : var(--font-weight-normal);
    line-height      : var(--line-height-normal);
    color            : var(--color-text);
    background-color : var(--color-bg);
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family    : var(--font-primary);
    font-weight    : var(--font-weight-bold);
    line-height    : var(--line-height-tight);
    color          : var(--color-text);
    letter-spacing : 0.08em;
    text-transform : uppercase;
}

p { line-height: var(--line-height-relaxed); color: var(--color-text-muted); }

a { color: inherit; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); }

address { font-style: normal; }


/* -----------------------------------------------------------------------------
   3. UTILITAIRES
   ----------------------------------------------------------------------------- */

.container {
    width     : 100%;
    max-width : var(--container-width);
    margin    : 0 auto;
    padding   : 0 var(--container-padding);
}

.site-main { padding-top: var(--navbar-height); }

.section__titre {
    font-size      : var(--font-size-xl);
    font-weight    : var(--font-weight-bold);
    text-align     : center;
    margin-bottom  : var(--space-2xl);
    color          : var(--color-text);
    position       : relative;
    padding-bottom : var(--space-lg);
    letter-spacing : 0.12em;
    text-transform : uppercase;
}

.section__titre::after {
    content    : '';
    position   : absolute;
    bottom     : 0;
    left       : 50%;
    transform  : translateX(-50%);
    width      : 3rem;
    height     : 1px;
    background : var(--gradient-gold);
}

/* Textes courants — pas en uppercase, plus lisibles */
p, li, .service-card__texte, .reassurance__texte,
.apropos__texte p, .actu-card__extrait, .avis-card__texte {
    text-transform : none;
    letter-spacing : 0.01em;
}

/* Boutons */
.btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding         : 0.75em 2.25em;
    font-family     : var(--font-primary);
    font-size       : var(--font-size-sm);
    font-weight     : var(--font-weight-semibold);
    letter-spacing  : 0.2em;
    text-transform  : uppercase;
    border-radius   : var(--radius-sm);
    border          : 1px solid transparent;
    cursor          : pointer;
    white-space     : nowrap;
    text-decoration : none;
    position        : relative;
    overflow        : hidden;
    transition      : all var(--transition-normal);
}

.btn::before {
    content   : '';
    position  : absolute;
    top       : 0; left: -75%;
    width     : 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform : skewX(-20deg);
    transition: left 0.5s ease;
}
.btn:hover::before { left: 125%; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background  : var(--color-primary);
    color       : #f4e8c0;
    border-color: var(--color-primary-dark);
    box-shadow  : inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 12px rgba(18,36,80,0.35);
}
.btn--primary:hover {
    background  : var(--color-primary-dark);
    border-color: var(--color-primary);
    color       : #fff8e0;
    box-shadow  : 0 0 20px rgba(30,60,122,0.3), 0 6px 20px rgba(18,36,80,0.3);
    transform   : translateY(-2px);
}

.btn--outline {
    background-color: transparent;
    color           : var(--color-border);
    border          : 1px solid var(--color-border);
}
.btn--outline:hover {
    background-color: rgba(196,168,124,0.12);
    border-color    : var(--color-secondary);
    color           : var(--color-secondary);
    transform       : translateY(-1px);
}

.btn--secondary {
    background  : linear-gradient(145deg, var(--color-secondary), #7a5c10);
    color       : #1a0e04;
    border-color: var(--color-secondary);
    box-shadow  : inset 0 1px 0 rgba(255,255,255,0.15), 0 3px 12px rgba(80,50,8,0.3);
}
.btn--secondary:hover {
    background  : linear-gradient(145deg, #b88c1a, #d4a820);
    border-color: #d4a820;
    color       : #0a0802;
    box-shadow  : 0 0 20px rgba(160,112,16,0.4), 0 6px 20px rgba(80,50,8,0.25);
    transform   : translateY(-2px);
}

.btn--danger     { background-color: transparent; color: var(--color-error); border-color: rgba(192,57,43,0.3); }
.btn--danger:hover { background-color: rgba(192,57,43,0.06); border-color: var(--color-error); box-shadow: 0 4px 16px rgba(192,57,43,0.12); }

.btn--sm   { padding: 0.4rem 1rem; font-size: var(--font-size-xs); letter-spacing: 0.12em; }
.btn--full { width: 100%; }

/* Boutons sur fonds sombres (hero, CTA) */
.hero .btn--primary, .cta-contact .btn--primary {
    background: var(--color-primary); color: #f4e8c0; border-color: var(--color-primary-dark);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 3px 16px rgba(18,36,80,0.5);
}
.hero .btn--primary:hover, .cta-contact .btn--primary:hover {
    background: var(--color-primary-dark); color: #fff8e0; border-color: var(--color-primary);
    box-shadow: 0 0 24px rgba(30,60,122,0.4), 0 8px 24px rgba(18,36,80,0.4);
    transform: translateY(-2px);
}
.hero .btn--secondary, .cta-contact .btn--secondary {
    background: transparent; color: rgba(212,188,140,0.85); border: 1px solid rgba(196,168,124,0.5);
}
.hero .btn--secondary:hover, .cta-contact .btn--secondary:hover {
    background: rgba(196,168,124,0.12); color: #d4bc8c; border-color: rgba(196,168,124,0.8);
}

/* Flash */
.flash {
    padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md);
    margin-bottom: var(--space-lg); display: flex; align-items: center;
    gap: var(--space-sm); font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm); border-left: 3px solid;
}
.flash--success { background-color: rgba(45,122,79,.08);  color: #2d7a4f; border-color: #2d7a4f; }
.flash--error   { background-color: rgba(192,57,43,.08);  color: #c0392b; border-color: #c0392b; }
.flash--warning { background-color: rgba(185,122,16,.08); color: #b97a10; border-color: #b97a10; }
.flash--info    { background-color: rgba(26,111,168,.08); color: #1a6fa8; border-color: #1a6fa8; }

/* Page header */
.page-header { background-color: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: var(--space-2xl) 0; text-align: center; }
.page-header__titre { font-size: var(--font-size-2xl); margin-bottom: var(--space-sm); color: var(--color-text); }
.page-header__intro { font-size: var(--font-size-md); color: var(--color-text-muted); }

/* Breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; font-size: var(--font-size-sm); color: var(--color-text-faint); margin-bottom: var(--space-md); letter-spacing: 0.03em; }
.breadcrumb li:not(:last-child)::after { content: '→'; margin-left: var(--space-sm); color: var(--color-text-faint); }
.breadcrumb a { color: var(--color-text-faint); }
.breadcrumb a:hover { color: var(--color-primary); }

/* Formulaires front */
.form__group { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.form__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.form__required { color: var(--color-error); }
.form__hint { font-size: var(--font-size-sm); color: var(--color-text-faint); margin-left: var(--space-xs); }
.form__input, .form__textarea, .form__select {
    width: 100%; padding: 0.75rem var(--space-md); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); font-family: var(--font-secondary); font-size: var(--font-size-base);
    color: var(--color-text); background-color: var(--color-bg-elevated);
    appearance: none; -webkit-appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form__input::placeholder, .form__textarea::placeholder { color: var(--color-text-faint); }
.form__input:focus, .form__textarea:focus, .form__select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(138,106,42,0.1); }
.form__textarea { resize: vertical; min-height: 9rem; }
.form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a6a2a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; }
.form__group--checkbox { flex-direction: row; align-items: center; gap: var(--space-sm); }
.form__checkbox { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; cursor: pointer; accent-color: var(--color-primary); }
.form__label--checkbox { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-normal); letter-spacing: normal; text-transform: none; cursor: pointer; }
.form__mention { font-size: var(--font-size-sm); color: var(--color-text-faint); margin-bottom: var(--space-md); }
.form__slug { font-size: var(--font-size-sm); color: var(--color-text-faint); background-color: var(--color-bg-elevated); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--color-border); font-family: 'Courier New', monospace; }


/* -----------------------------------------------------------------------------
   4. NAVIGATION
   ----------------------------------------------------------------------------- */

.site-header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height);
    z-index: 1000; background-color: var(--color-primary-dark);
    border-bottom: 1px solid rgba(196, 168, 124, 0.15);
    transition: height var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* Transparente uniquement sur la home avant scroll */
.site-header--home {
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled,
.site-header--home.is-scrolled {
    height: var(--navbar-height-small);
    background-color: var(--color-primary-dark);
    border-bottom: 1px solid rgba(196, 168, 124, 0.25);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.navbar { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding); }

.navbar__logo { font-family: var(--font-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: #d4bc8c; display: flex; align-items: center; gap: var(--space-sm); transition: opacity var(--transition-fast); letter-spacing: 0.12em; text-transform: uppercase; }
.navbar__logo:hover { color: #d4bc8c; opacity: 0.85; }
.navbar__logo img  { height: 3rem; width: auto; display: block; }
.navbar__logo span { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: #d4bc8c; }

.navbar__menu { display: flex; gap: var(--space-xl); align-items: center; }
.navbar__menu > li { display: flex; align-items: center; }

.navbar__link {
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(212, 188, 140, 0.65);
    padding: var(--space-xs) 0; position: relative; transition: color var(--transition-fast);
}
.navbar__link:hover   { color: #d4a820; }
.navbar__link--active { color: #d4a820; }

.navbar__link::after, .navbar__dropdown-toggle::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px;
    background: #d4a820; transition: width var(--transition-normal);
}
.navbar__link:hover::after, .navbar__link--active::after,
.navbar__dropdown-toggle:hover::after, .navbar__dropdown-toggle.navbar__link--active::after { width: 100%; }

.navbar__burger { display: none; flex-direction: column; gap: 5px; padding: var(--space-sm); background: none; border: none; cursor: pointer; }
.navbar__burger span { display: block; width: 1.5rem; height: 1px; background-color: rgba(212, 188, 140, 0.65); transition: all var(--transition-fast); }

.navbar__dropdown { position: relative; }
.navbar__dropdown-toggle {
    display: flex; align-items: center; gap: 0.35rem; background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    letter-spacing: 0.2em; text-transform: uppercase; color: rgba(212, 188, 140, 0.65);
    padding: var(--space-xs) 0; line-height: inherit; position: relative; transition: color var(--transition-fast);
}
.navbar__dropdown-toggle:hover { color: #d4a820; }

.navbar__dropdown-arrow { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; transition: transform var(--transition-fast); margin-top: 2px; opacity: 0.7; }
.navbar__dropdown.is-open .navbar__dropdown-arrow { transform: rotate(180deg); }

.navbar__dropdown-menu {
    display: none; position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%);
    background-color: var(--color-primary-dark); border: 1px solid rgba(196, 168, 124, 0.2);
    border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.4); min-width: 14rem; padding: var(--space-sm) 0; z-index: 200;
}
.navbar__dropdown.is-open .navbar__dropdown-menu { display: block; }

.navbar__dropdown-link {
    display: block; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium); letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(212, 188, 140, 0.65);
    white-space: nowrap; transition: color var(--transition-fast), background-color var(--transition-fast);
}
.navbar__dropdown-link:hover { color: #d4a820; background-color: rgba(255,255,255,0.04); }


/* -----------------------------------------------------------------------------
   5. HERO
   ----------------------------------------------------------------------------- */

.hero {
    position: relative; height: var(--hero-height);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; margin-top: calc(-1 * var(--navbar-height));
}
.hero__bg {
    position            : absolute;
    top                 : -20%;
    left                : 0;
    right               : 0;
    bottom              : -20%;
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    will-change         : transform;
}
.hero__overlay { position: absolute; inset: 0; background-color: var(--hero-overlay); z-index: 1; }
.hero__content { position: relative; z-index: 2; text-align: center; padding: 0 var(--container-padding); max-width: 50rem; }
.hero__h1 {
    font-size      : var(--font-size-3xl);
    font-weight    : var(--font-weight-bold);
    color          : var(--color-white);
    margin-bottom  : var(--space-sm);
    line-height    : var(--line-height-tight);
    position       : relative;
    padding-bottom : var(--space-md);
}
.hero__h1::after {
    content    : '';
    position   : absolute;
    bottom     : 0;
    left       : 50%;
    transform  : translateX(-50%);
    width      : 4rem;
    height     : 1px;
    background : linear-gradient(90deg, transparent, #d4a820, transparent);
}
.hero__h2 {
    font-size      : var(--font-size-lg);
    color          : rgba(255,255,255,0.8);
    margin-bottom  : var(--space-xl);
    font-family    : var(--font-secondary);
    font-weight    : var(--font-weight-normal);
    letter-spacing : 0.01em;
    text-transform : none;
    font-style     : italic;
}
.hero__buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }


/* -----------------------------------------------------------------------------
   6. SERVICES
   ----------------------------------------------------------------------------- */

.services { padding: var(--space-3xl) 0; background-color: var(--color-bg); }

.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-xl); }

.service-card {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-align     : center;
    gap            : var(--space-lg);
    padding        : var(--space-lg);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-lg);
    background     : linear-gradient(160deg, var(--color-bg-card) 0%, var(--color-bg-elevated) 100%);
    position       : relative;
    overflow       : hidden;
    transition     : transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* Liseré doré gauche au hover */
.service-card::before {
    content    : '';
    position   : absolute;
    left       : 0;
    top        : 10%;
    height     : 80%;
    width      : 2px;
    background : var(--gradient-gold);
    transform  : scaleY(0);
    transition : transform var(--transition-normal);
    transform-origin: center;
}
.service-card:hover::before { transform: scaleY(1); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(196,168,124,0.4); }

.service-card__image { width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden; }
.service-card__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95); transition: transform var(--transition-slow); }
.service-card:hover .service-card__image img { transform: scale(1.04); filter: brightness(1); }

.service-card__body { display: flex; flex-direction: column; gap: var(--space-sm); }
.service-card__titre { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); font-family: var(--font-primary); color: var(--color-text); }
.service-card__texte { font-size: var(--font-size-base); color: var(--color-text-muted); }
.service-card__btn   { margin-top: var(--space-md); align-self: center; }

/* Pages services détail */
.service-detail { padding: var(--space-3xl) 0; }
.service-detail__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-2xl); align-items: center; }
.service-detail__texte { display: flex; flex-direction: column; gap: var(--space-md); }
.service-detail__texte h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text); }
.service-detail__texte p  { font-size: var(--font-size-base); color: var(--color-text-muted); line-height: 1.7; }
.service-detail__image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; }
.service-detail__image img { width: 100%; height: 100%; object-fit: cover; }

.service-cta { padding: var(--space-3xl) 0; background-color: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.service-cta__container { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); text-align: center; }
.service-cta__container h2 { font-size: var(--font-size-xl); color: var(--color-text); }


/* -----------------------------------------------------------------------------
   7. RÉASSURANCE
   ----------------------------------------------------------------------------- */

.reassurance {
    background    : linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    padding       : var(--space-2xl) 0;
    border-top    : 1px solid rgba(196,168,124,0.15);
    border-bottom : 1px solid rgba(196,168,124,0.15);
    position      : relative;
    overflow      : hidden;
}

/* Filigrane méandre grec */
.reassurance::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : repeating-linear-gradient(
        90deg,
        transparent,
        transparent 1.5rem,
        rgba(196,168,124,0.04) 1.5rem,
        rgba(196,168,124,0.04) 3rem
    );
    pointer-events : none;
}

.reassurance__grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 0;
    position              : relative;
}

.reassurance__item {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    text-align      : center;
    gap             : var(--space-sm);
    padding         : var(--space-xl) var(--space-xl);
    position        : relative;
    transition      : background var(--transition-normal);
}

/* Séparateurs verticaux entre items */
.reassurance__item:not(:last-child)::after {
    content    : '';
    position   : absolute;
    right      : 0;
    top        : 20%;
    height     : 60%;
    width      : 1px;
    background : rgba(196,168,124,0.2);
}

.reassurance__item:hover { background: rgba(255,255,255,0.04); }

.reassurance__icone {
    width            : 4rem;
    height           : 4rem;
    border-radius    : 50%;
    background-color : rgba(196,168,124,0.12);
    border           : 1px solid rgba(196,168,124,0.25);
    display          : flex;
    align-items      : center;
    justify-content  : center;
    margin-bottom    : var(--space-xs);
    transition       : background-color var(--transition-normal), border-color var(--transition-normal);
}
.reassurance__item:hover .reassurance__icone {
    background-color : rgba(196,168,124,0.2);
    border-color     : rgba(196,168,124,0.5);
}
.reassurance__icone i { font-size: 1.5rem; color: #d4bc8c; }

.reassurance__titre {
    font-family    : var(--font-primary);
    font-size      : var(--font-size-base);
    font-weight    : 600;
    color          : #d4bc8c;
    letter-spacing : 0.15em;
    text-transform : uppercase;
}
.reassurance__texte {
    font-size   : var(--font-size-sm);
    color       : rgba(255,255,255,0.7);
    line-height : var(--line-height-relaxed);
    max-width   : 22rem;
    font-family : var(--font-secondary);
}


/* -----------------------------------------------------------------------------
   8. À PROPOS
   ----------------------------------------------------------------------------- */

.apropos { padding: var(--space-3xl) 0; background-color: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

.apropos__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-2xl); align-items: center; }

.apropos__texte { display: flex; flex-direction: column; gap: var(--space-md); }
.apropos__texte .section__titre { text-align: left; }
.apropos__texte .section__titre::after { left: 0; transform: none; }
.apropos__texte p { color: var(--color-text-muted); font-size: var(--font-size-md); }
.apropos__btn { align-self: flex-start; margin-top: var(--space-sm); }

.apropos__citation {
    font-family    : var(--font-primary);
    font-size      : var(--font-size-lg);
    font-style     : italic;
    color          : var(--color-secondary);
    border-left    : 2px solid var(--color-secondary);
    padding-left   : var(--space-lg);
    margin-bottom  : var(--space-md);
    line-height    : var(--line-height-relaxed);
    letter-spacing : 0.03em;
    text-transform : none;
}

.apropos__image { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 1/1; transition: box-shadow var(--transition-normal), border-color var(--transition-normal); }
.apropos__image:hover { box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.apropos__image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); filter: brightness(0.97) contrast(1.02); transition: transform var(--transition-slow), filter var(--transition-normal); }
.apropos__image:hover img { transform: scale(1.04); filter: brightness(1) contrast(1.02); }


/* -----------------------------------------------------------------------------
   9. ACTUALITÉS
   ----------------------------------------------------------------------------- */

.actualites-apercu { padding: var(--space-3xl) 0; background-color: var(--color-bg); }
.actualites { padding: var(--space-3xl) 0; }

.actualites__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-lg); }

.actualites__vide { text-align: center; color: var(--color-text-faint); font-size: var(--font-size-md); padding: var(--space-3xl) 0; }

.actu-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-bg-card); display: flex; flex-direction: column; transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); }
.actu-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-light); }

.actu-card__image { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.actu-card__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.97); transition: filter var(--transition-normal); }
.actu-card:hover .actu-card__image img { filter: brightness(1); }

.actu-card__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; gap: var(--space-sm); }
.actu-card__titre { font-family: var(--font-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-text); }
.actu-card__titre a { color: var(--color-text); }
.actu-card__titre a:hover { color: var(--color-primary); }
.actu-card__extrait { color: var(--color-text-muted); font-size: var(--font-size-sm); flex: 1; }
.actu-card .btn { align-self: center; margin-top: auto; }

.actualites-apercu__cta { text-align: center; margin-top: var(--space-2xl); }

/* Pagination */
.pagination { margin-top: var(--space-2xl); }
.pagination__liste { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; }
.pagination__lien { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 var(--space-sm); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border: 1px solid var(--color-border); color: var(--color-text-muted); background: var(--color-bg-card); transition: all var(--transition-fast); }
.pagination__lien:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.pagination__lien--actif { background: var(--gradient-gold); border-color: transparent; color: #fff; font-weight: var(--font-weight-bold); box-shadow: var(--shadow-gold); cursor: default; }
.pagination__lien--actif:hover { background: var(--gradient-gold); color: #fff; }
.pagination__lien--disabled { color: var(--color-text-faint); border-color: var(--color-border); background: var(--color-bg); opacity: 0.5; cursor: default; }
.pagination__lien--disabled:hover { color: var(--color-text-faint); border-color: var(--color-border); background: var(--color-bg); }


/* -----------------------------------------------------------------------------
   10. CTA CONTACT
   ----------------------------------------------------------------------------- */

.cta-contact {
    padding          : var(--space-3xl) 0;
    background-color : var(--color-bg-alt);
}

.cta-contact::before { display: none; }

/* CTA simple — sans card (pages article, service, about) */
.cta-contact > .container > .cta-contact__container {
    position        : relative;
    inset           : auto;
    z-index         : auto;
    padding         : 0;
}

.cta-contact__card {
    position      : relative;
    border-radius : var(--radius-lg);
    overflow      : hidden;
    max-width     : 70rem;
    margin        : 0 auto;
    aspect-ratio  : 16/7;
    box-shadow    : 0 20px 60px rgba(18, 36, 80, 0.4), 0 4px 20px rgba(0,0,0,0.3);
    border        : 1px solid rgba(196, 168, 124, 0.2);
}

.cta-contact__card-img {
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    object-position: center top;
    display    : block;
}

.cta-contact__card-overlay {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(
        to bottom,
        rgba(18, 36, 80, 0.35) 0%,
        rgba(10, 20, 50, 0.75) 100%
    );
    z-index    : 1;
}

.cta-contact__container {
    position        : absolute;
    inset           : 0;
    z-index         : 2;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : var(--space-xl);
    text-align      : center;
    padding         : var(--space-2xl);
}

.cta-contact h2 { font-size: var(--font-size-xl); color: var(--color-white); text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.cta-contact p  { font-size: var(--font-size-md); color: rgba(255,255,255,0.85); max-width: 42rem; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }


/* -----------------------------------------------------------------------------
   11. ARTICLE INDIVIDUEL
   ----------------------------------------------------------------------------- */

.article-header { padding: var(--space-2xl) 0; background-color: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); }
.article__date  { font-size: var(--font-size-xs); color: var(--color-primary); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--font-weight-medium); margin-bottom: var(--space-sm); }
.article__titre { font-size: var(--font-size-2xl); color: var(--color-text); }
.article        { padding: var(--space-3xl) 0; }
.article__container { max-width: 50rem; margin: 0 auto; }
.article__image { margin-bottom: var(--space-2xl); aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg); }
.article__image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.97); }
.article__contenu { font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--color-text-muted); }
.article__retour { margin-top: var(--space-2xl); }


/* -----------------------------------------------------------------------------
   13. SECTION AVIS — Carrousel boucle infinie
   ----------------------------------------------------------------------------- */

.avis-section { padding: var(--space-3xl) 0; background-color: var(--color-bg-alt); }

.avis-carrousel {
    position : relative;
    margin   : var(--space-xl) 0 var(--space-lg);
}

.avis-carrousel__viewport {
    overflow       : hidden;
    margin         : 0 3rem;
    padding-bottom : 1.5rem;
}

.avis-carrousel__track {
    display        : flex;
    transition     : transform 0.5s ease;
    gap            : var(--space-lg);
    align-items    : flex-start;
    padding-bottom : 0.25rem;
}

.avis-card-wrap {
    flex-shrink    : 0;
    display        : flex;
    flex-direction : column;
    box-sizing     : border-box;
}

.avis-card {
    flex           : 1;
    padding        : var(--space-lg);
    background     : var(--color-bg-card);
    border         : 1px solid var(--color-border);
    border-radius  : var(--radius-lg);
    box-shadow     : var(--shadow-sm);
    text-align     : left;
    overflow       : visible;
    box-sizing     : border-box;
    display        : flex;
    flex-direction : column;
    gap            : var(--space-sm);
    position       : relative;
    margin-bottom  : 1rem;
    min-height     : 10rem;
    transition     : min-height var(--transition-normal);
}

/* Queue de bulle BD — triangle pointant vers le bas */
.avis-card::after {
    content      : '';
    position     : absolute;
    bottom       : -1rem;
    left         : var(--space-xl);
    width        : 0;
    height       : 0;
    border-left  : 0.75rem solid transparent;
    border-right : 0.75rem solid transparent;
    border-top   : 1rem solid var(--color-bg-card);
    filter       : drop-shadow(0 2px 1px rgba(30,27,23,0.08));
}

/* Petit trait de bordure sous la queue */
.avis-card::before {
    content      : '';
    position     : absolute;
    bottom       : calc(-1rem - 1px);
    left         : calc(var(--space-xl) - 1px);
    width        : 0;
    height       : 0;
    border-left  : calc(0.75rem + 1px) solid transparent;
    border-right : calc(0.75rem + 1px) solid transparent;
    border-top   : calc(1rem + 1px) solid var(--color-border);
    z-index      : -1;
}

.avis-card__stars { color: #f5a623; font-size: var(--font-size-md); }

.avis-card__body { flex: 1; }

.avis-card__texte {
    font-size     : var(--font-size-sm);
    line-height   : var(--line-height-relaxed);
    color         : var(--color-text-muted);
    margin        : 0;
    overflow-wrap : break-word;
}

.avis-card__lire-suite {
    background    : none;
    border        : none;
    cursor        : pointer;
    color         : var(--color-primary);
    font-size     : var(--font-size-sm);
    font-weight   : var(--font-weight-medium);
    padding       : 0;
    margin-top    : var(--space-xs);
    font-family   : var(--font-secondary);
}
.avis-card__lire-suite:hover { text-decoration: underline; }


.avis-card__auteur {
    display     : flex;
    align-items : center;
    gap         : var(--space-sm);
    padding-left: var(--space-xl);
    margin-top  : var(--space-xs);
}
.avis-card__auteur strong { color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.avis-card__date   { color: var(--color-text-faint); font-size: var(--font-size-xs); }

/* Boutons précédent/suivant — positionnés sur le carrousel complet, pas le viewport */
.avis-carrousel__btn {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    background      : var(--color-bg-card);
    border          : 1px solid var(--color-border);
    border-radius   : 50%;
    width           : 2.5rem;
    height          : 2.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    color           : var(--color-text-muted);
    transition      : border-color var(--transition-fast), color var(--transition-fast);
    z-index         : 2;
}
.avis-carrousel__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.avis-carrousel__btn--prev { left: 0; }
.avis-carrousel__btn--next { right: 0; }

/* Lien Google */
.avis-section__cta { text-align: center; margin-top: var(--space-lg); }
.avis-section__cta .btn { display: inline-flex; align-items: center; gap: var(--space-sm); }


/* -----------------------------------------------------------------------------
   14. PAGE CONTACT
   ----------------------------------------------------------------------------- */

.contact { padding: var(--space-3xl) 0; }
.contact__container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact__left { display: flex; flex-direction: column; gap: var(--space-lg); }

/* Bloc coordonnées */
.contact__coords { display: flex; flex-direction: column; gap: var(--space-md); background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.contact__coord-item { display: flex; align-items: flex-start; gap: var(--space-md); }
.contact__coord-item > i { color: var(--color-primary); font-size: var(--font-size-md); margin-top: 0.2rem; flex-shrink: 0; width: 1.25rem; text-align: center; }
.contact__coord-lines { display: flex; flex-direction: column; gap: 0.25rem; }
.contact__coord-lines a, .contact__coord-lines span { font-size: var(--font-size-base); color: var(--color-text-muted); }
.contact__coord-lines a:hover { color: var(--color-primary); }
.contact__coord-socials { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.contact__coord-socials a { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background-color: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast), color var(--transition-fast); }
.contact__coord-socials a:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Carte */
.contact__map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 4/3; }
.contact__map iframe { width: 100%; height: 100%; display: block; }

/* Formulaire */
.contact__form-wrapper { background-color: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-xl); }


/* -----------------------------------------------------------------------------
   13. PAGES LÉGALES
   ----------------------------------------------------------------------------- */

.legal { padding: var(--space-3xl) 0; }
.legal__container { max-width: 50rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-2xl); }
.legal__bloc h2 { font-family: var(--font-primary); font-size: var(--font-size-lg); margin-bottom: var(--space-md); color: var(--color-text); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-primary); }
.legal__bloc p  { color: var(--color-text-muted); font-size: var(--font-size-base); white-space: pre-line; }


/* -----------------------------------------------------------------------------
   14. FOOTER
   ----------------------------------------------------------------------------- */

.site-footer { background-color: #1e1b17; border-top: 1px solid var(--color-border); color: #6b6259; }
.footer__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-xl); max-width: var(--container-width); margin: 0 auto; padding: var(--space-xl) var(--container-padding); justify-items: center; }
.footer__social, .footer__legal, .footer__contact { text-align: center; }
.footer__social ul { display: flex; flex-direction: row; gap: var(--space-sm); }
.footer__social a { font-size: var(--font-size-md); color: #6b6259; background-color: #2a2720; border: 1px solid #3a3630; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.footer__social a:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.footer__titre { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: #9a9080; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-md); }
.footer__legal ul, .footer__contact ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer__legal a, .footer__contact a, .footer__contact li { font-size: var(--font-size-sm); color: #6b6259; }
.footer__legal a:hover, .footer__contact a:hover { color: var(--color-primary); }
.footer__bottom { border-top: 1px solid #2a2720; max-width: var(--container-width); margin: 0 auto; padding: var(--space-md) var(--container-padding); text-align: center; font-size: var(--font-size-xs); color: #4a4640; letter-spacing: 0.04em; }


/* -----------------------------------------------------------------------------
   15. PAGES D'ERREUR
   ----------------------------------------------------------------------------- */

.error-page { background-color: var(--color-bg); }
.error { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.error__container { text-align: center; padding: var(--space-2xl); }
.error__code { font-size: 7.5rem; font-weight: var(--font-weight-bold); font-family: var(--font-primary); line-height: 1; display: block; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.error__titre { font-size: var(--font-size-xl); margin-bottom: var(--space-md); color: var(--color-text); }
.error__texte { font-size: var(--font-size-md); color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.error__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }


/* -----------------------------------------------------------------------------
   16. ANIMATIONS
   ----------------------------------------------------------------------------- */

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in--visible { opacity: 1; transform: translateY(0); }


/* -----------------------------------------------------------------------------
   17. RESPONSIVE
   ----------------------------------------------------------------------------- */

/* =============================================================================
   RESPONSIVE
   Breakpoints :
     - Tablette  : max 72rem  (1152px) — grilles 2 colonnes, burger
     - Mobile    : max 48rem  (768px)  — 1 colonne, tout empilé
   ============================================================================= */


/* -----------------------------------------------------------------------------
   TABLETTE — max 72rem (1152px)
   Burger activé ici — le menu Cinzel uppercase en letter-spacing 0.2em
   nécessite beaucoup d'espace, on passe au burger bien avant 1024px
   ----------------------------------------------------------------------------- */
@media (max-width: 72rem) {

    /* Navbar burger */
    .navbar__menu {
        display          : none;
        position         : fixed;
        top              : var(--navbar-height);
        left             : 0;
        right            : 0;
        background-color : var(--color-primary-dark);
        border-bottom    : 1px solid rgba(196,168,124,0.15);
        flex-direction   : column;
        align-items      : flex-start;
        padding          : var(--space-lg) var(--space-xl);
        box-shadow       : 0 8px 32px rgba(0,0,0,0.4);
        gap              : var(--space-md);
    }
    .navbar__menu.is-open { display: flex; }
    .navbar__burger { display: flex; }
    .navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar__burger.is-open span:nth-child(2) { opacity: 0; }
    .navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .navbar__dropdown { position: static; }
    .navbar__dropdown-menu {
        display          : none !important;
        position         : static !important;
        top              : auto !important;
        left             : auto !important;
        right            : auto !important;
        transform        : none !important;
        box-shadow       : none !important;
        border           : none !important;
        border-left      : 1px solid rgba(196,168,124,0.3) !important;
        border-radius    : 0 !important;
        background       : transparent !important;
        padding          : var(--space-xs) 0 0 var(--space-lg) !important;
        margin-top       : var(--space-xs) !important;
        width            : 100% !important;
        min-width        : 0 !important;
        max-width        : 100% !important;
        z-index          : auto !important;
    }
    .navbar__dropdown.is-open .navbar__dropdown-menu {
        display          : flex !important;
        flex-direction   : column !important;
        gap              : var(--space-xs) !important;
    }
    .navbar__dropdown-toggle { width: 100%; justify-content: space-between; color: rgba(212,188,140,0.65); }
    .navbar__dropdown-link {
        padding          : var(--space-xs) 0;
        color            : rgba(212,188,140,0.5);
        background-color : transparent;
        white-space      : normal;
        width            : 100%;
    }
    .navbar__dropdown-link:hover { color: #d4a820; background-color: transparent; }

    /* Services — 2 colonnes */
    .services__grid { grid-template-columns: repeat(2, 1fr); }

    /* Service détail — empilé */
    .service-detail__container { grid-template-columns: 1fr; }
    .service-detail__image { max-width: 28rem; margin: 0 auto; }

    /* Réassurance — 3 reste OK jusqu'ici */

    /* À propos — empilé */
    .apropos__container { grid-template-columns: 1fr; }
    .apropos__texte .section__titre { text-align: center; }
    .apropos__texte .section__titre::after { left: 50%; transform: translateX(-50%); }
    .apropos__btn { align-self: center; }
    .apropos__image { max-width: 28rem; margin: 0 auto; }

    /* Contact */
    .contact__container { grid-template-columns: 1fr; }
    .contact__map { aspect-ratio: 16/9; }

    /* CTA card */
    .cta-contact__card { aspect-ratio: 16/9; }
}


/* -----------------------------------------------------------------------------
   MOBILE — max 48rem (768px)
   ----------------------------------------------------------------------------- */
@media (max-width: 48rem) {

    :root {
        --font-size-3xl     : 2rem;
        --font-size-2xl     : 1.6rem;
        --font-size-xl      : 1.35rem;
        --font-size-lg      : 1.2rem;
        --hero-height       : 100svh;
        --container-padding : 1.25rem;
    }

    .hero__bg      { top: 0; bottom: 0; }
    .hero__buttons { flex-direction: column; align-items: center; }

    /* Services — 1 colonne */
    .services__grid { grid-template-columns: 1fr; }

    /* Réassurance */
    .reassurance__grid { grid-template-columns: 1fr; }
    .reassurance__item:not(:last-child)::after {
        right  : auto;
        bottom : 0;
        top    : auto;
        left   : 20%;
        width  : 60%;
        height : 1px;
    }

    /* Actualités */
    .actualites__grid { grid-template-columns: 1fr; }

    /* CTA card */
    .cta-contact__card { aspect-ratio: 4/3; }

    /* Avis */
    .avis-carrousel__viewport { margin: 0 2rem; }
}