/* ============================================================
   INFOHAS — Feuille de style principale
   Styles complémentaires au CSS critique (critical.css)
   Fichier chargé de manière asynchrone après le FCP.
   ============================================================ */

/* ============================================================
   Layout avancé
   ============================================================ */
.grid{display:grid;gap:var(--spacing-xl)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.flex{display:flex}
.flex--center{align-items:center;justify-content:center}
.flex--between{align-items:center;justify-content:space-between}
.flex--col{flex-direction:column}
.flex--wrap{flex-wrap:wrap}

/* ============================================================
   Typography avancée
   ============================================================ */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-uppercase{text-transform:uppercase;letter-spacing:0.06em}
.text-sm{font-size:var(--font-size-sm)}
.text-md{font-size:var(--font-size-md)}
.text-lg{font-size:var(--font-size-lg)}
.text-xl{font-size:var(--font-size-xl)}
.text-2xl{font-size:var(--font-size-2xl)}
.text-light{color:var(--color-text-light)}
.text-muted{color:var(--color-text-light)}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}

/* ============================================================
   Cards (compléments)
   ============================================================ */
.formation-card__badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);background:rgba(30,144,255,0.1);color:var(--color-sky);font-size:var(--font-size-xs);font-weight:600;border-radius:var(--radius-full);margin-bottom:var(--spacing-md)}
.formation-card__img{width:100%;height:200px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);background:var(--color-muted)}
.formation-card__details{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}
.formation-card__detail{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--color-text-light)}
.formation-card__detail-icon{color:var(--color-sky);flex-shrink:0}

/* ============================================================
   Features / Pourquoi INFOHAS
   ============================================================ */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-2xl)}
.feature-item{text-align:center;padding:var(--spacing-2xl);background:var(--color-bg);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:all var(--transition-base)}
.feature-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-item__icon{width:64px;height:64px;margin:0 auto var(--spacing-lg);background:var(--color-muted);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.75rem}
.feature-item__title{font-size:var(--font-size-md);margin-bottom:var(--spacing-sm)}
.feature-item__desc{font-size:var(--font-size-sm);color:var(--color-text-light);line-height:var(--line-height-relaxed)}

/* ============================================================
   Témoignages
   ============================================================ */
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-xl)}
.testimonial-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);position:relative}
.testimonial-card::before{content:"\201C";position:absolute;top:var(--spacing-md);left:var(--spacing-lg);font-size:4rem;color:var(--color-sky);opacity:0.15;font-family:Georgia,serif;line-height:1}
.testimonial-card__quote{font-size:var(--font-size-base);font-style:italic;color:var(--color-text);margin-bottom:var(--spacing-lg);line-height:var(--line-height-relaxed);position:relative;z-index:1}
.testimonial-card__author{display:flex;align-items:center;gap:var(--spacing-md)}
.testimonial-card__avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-sm);color:var(--color-sky)}
.testimonial-card__info{display:flex;flex-direction:column}
.testimonial-card__name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-navy)}
.testimonial-card__role{font-size:var(--font-size-xs);color:var(--color-text-light)}
.testimonial-card__stars{display:flex;gap:2px;color:var(--color-gold);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm)}

/* ============================================================
   Carousel / Slider
   ============================================================ */
.carousel{position:relative;overflow:hidden}
.carousel__track{display:flex;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);will-change:transform}
.carousel__slide{min-width:100%;padding:0 var(--spacing-lg)}
.carousel__btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--color-text);cursor:pointer;z-index:10;transition:all var(--transition-fast);box-shadow:var(--shadow-md)}
.carousel__btn:hover{background:var(--color-sky);border-color:var(--color-sky);color:#fff}
.carousel__btn--prev{left:var(--spacing-md)}
.carousel__btn--next{right:var(--spacing-md)}
.carousel__dots{display:flex;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-xl)}
.carousel__dot{width:10px;height:10px;border-radius:var(--radius-full);background:var(--color-border);border:none;cursor:pointer;transition:all var(--transition-fast)}
.carousel__dot.is-active{background:var(--color-sky);width:28px;border-radius:var(--radius-full)}

/* ============================================================
   Partenaires / Logos
   ============================================================ */
.partners-section{padding:var(--spacing-3xl) 0;background:var(--color-muted)}
.partners-grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--spacing-2xl)}
.partners-grid img{height:48px;width:auto;opacity:0.5;filter:grayscale(100%);transition:all var(--transition-base)}
.partners-grid img:hover{opacity:1;filter:grayscale(0)}

/* ============================================================
   Formulaires
   ============================================================ */
.form-group{margin-bottom:var(--spacing-lg)}
.form-label{display:block;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm)}
.form-input,.form-textarea,.form-select{width:100%;padding:0.75rem 1rem;font-size:var(--font-size-base);font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);appearance:none}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--color-sky);box-shadow:0 0 0 3px rgba(30,144,255,0.15)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-light)}
.form-textarea{resize:vertical;min-height:120px}
.form-select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.form-checkbox{display:flex;align-items:flex-start;gap:var(--spacing-sm)}
.form-checkbox input{margin-top:4px;accent-color:var(--color-sky);width:18px;height:18px}
.form-error{color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}
.form-success{color:var(--color-success);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}

/* ---- Search form ---- */
.search-form{display:flex;gap:var(--spacing-sm);max-width:500px;margin:0 auto}
.search-form__input{flex:1;padding:0.75rem 1rem;font-size:var(--font-size-base);font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}
.search-form__input:focus{outline:none;border-color:var(--color-sky);box-shadow:0 0 0 3px rgba(30,144,255,0.15)}
.search-form__submit{padding:0.75rem 1.5rem;font-size:var(--font-size-base);font-weight:600;font-family:var(--font-body);color:#fff;background:var(--color-sky);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);white-space:nowrap}
.search-form__submit:hover{background:var(--color-sky-dark)}

/* ============================================================
   FAQ / Accordéon
   ============================================================ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);overflow:hidden;transition:all var(--transition-fast)}
.faq-item.is-open{border-color:var(--color-sky);box-shadow:var(--shadow-sm)}
.faq-item__question{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);width:100%;padding:var(--spacing-lg);font-size:var(--font-size-base);font-weight:600;color:var(--color-navy);text-align:left;cursor:pointer;background:transparent;border:none;transition:background var(--transition-fast);font-family:var(--font-body)}
.faq-item__question:hover{background:var(--color-muted)}
.faq-item__icon{flex-shrink:0;width:24px;height:24px;transition:transform var(--transition-base);color:var(--color-sky)}
.faq-item.is-open .faq-item__icon{transform:rotate(180deg)}
.faq-item__answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease-out}
.faq-item.is-open .faq-item__answer{max-height:500px;transition:max-height 0.5s ease-in}
.faq-item__answer-inner{padding:0 var(--spacing-lg) var(--spacing-lg);font-size:var(--font-size-base);color:var(--color-text);line-height:var(--line-height-relaxed)}

/* ============================================================
   Timeline (historique)
   ============================================================ */
.timeline{position:relative;max-width:800px;margin:0 auto;padding-left:var(--spacing-3xl)}
.timeline::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--color-border)}
.timeline__item{position:relative;padding-bottom:var(--spacing-2xl);padding-left:var(--spacing-xl)}
.timeline__item:last-child{padding-bottom:0}
.timeline__dot{position:absolute;left:calc(-1 * var(--spacing-3xl) + 8px);top:4px;width:16px;height:16px;background:var(--color-sky);border:3px solid var(--color-bg);border-radius:var(--radius-full);box-shadow:0 0 0 2px var(--color-sky)}
.timeline__year{font-size:var(--font-size-sm);font-weight:700;color:var(--color-sky);margin-bottom:var(--spacing-xs)}
.timeline__title{font-size:var(--font-size-md);font-weight:700;margin-bottom:var(--spacing-sm)}
.timeline__desc{font-size:var(--font-size-sm);color:var(--color-text-light);line-height:var(--line-height-relaxed)}

/* ============================================================
   Article / Page content
   ============================================================ */
.entry-content{max-width:var(--container-max);margin:0 auto;padding:var(--spacing-3xl) var(--spacing-md)}
.entry-content h2{font-size:var(--font-size-2xl);margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-md)}
.entry-content h3{font-size:var(--font-size-xl);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}
.entry-content h4{font-size:var(--font-size-lg);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}
.entry-content p{margin-bottom:var(--spacing-md);line-height:var(--line-height-relaxed)}
.entry-content ul,.entry-content ol{margin-bottom:var(--spacing-md);padding-left:var(--spacing-xl)}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:var(--spacing-sm);line-height:var(--line-height-relaxed)}
.entry-content blockquote{border-left:4px solid var(--color-gold);padding:var(--spacing-md) var(--spacing-lg);margin:var(--spacing-xl) 0;background:var(--color-muted);border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic;color:var(--color-text)}
.entry-content img{border-radius:var(--radius-md);margin:var(--spacing-xl) 0}
.entry-content a{color:var(--color-sky);text-decoration:underline;text-underline-offset:2px}
.entry-content a:hover{color:var(--color-sky-dark)}
.entry-content table{width:100%;border-collapse:collapse;margin:var(--spacing-xl) 0}
.entry-content th,.entry-content td{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);text-align:left}
.entry-content th{background:var(--color-muted);font-weight:600}
.entry-content pre{background:var(--color-muted);padding:var(--spacing-lg);border-radius:var(--radius-md);overflow-x:auto;margin:var(--spacing-xl) 0;font-size:var(--font-size-sm)}
.entry-content code{font-family:'Fira Code',monospace;background:var(--color-muted);padding:2px 6px;border-radius:var(--radius-sm);font-size:0.9em}
.entry-content pre code{background:none;padding:0}
.entry-content hr{border:none;height:1px;background:var(--color-border);margin:var(--spacing-2xl) 0}

/* ============================================================
   Sidebar
   ============================================================ */
.content-with-sidebar{display:grid;grid-template-columns:1fr 320px;gap:var(--spacing-2xl);align-items:start}
.sidebar{position:sticky;top:calc(var(--header-height) + var(--spacing-xl))}
.widget{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}
.widget__title{font-size:var(--font-size-md);font-weight:700;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--color-sky)}

/* ============================================================
   Pagination
   ============================================================ */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-2xl)}
.pagination__item{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--spacing-sm);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);text-decoration:none;border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.pagination__item:hover{border-color:var(--color-sky);color:var(--color-sky)}
.pagination__item.is-current{background:var(--color-sky);border-color:var(--color-sky);color:#fff}

/* ============================================================
   404 Page
   ============================================================ */
.error-404{text-align:center;padding:var(--spacing-5xl) var(--spacing-md)}
.error-404__code{font-size:clamp(6rem,15vw,10rem);font-weight:900;color:var(--color-sky);opacity:0.2;line-height:1;margin-bottom:var(--spacing-lg)}
.error-404__title{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-md)}
.error-404__desc{font-size:var(--font-size-md);color:var(--color-text-light);max-width:500px;margin:0 auto var(--spacing-xl)}
.error-404__search{max-width:500px;margin:0 auto var(--spacing-xl)}
.error-404__links{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}

/* ============================================================
   Search Results
   ============================================================ */
.search-results{padding:var(--spacing-2xl) 0}
.search-results__header{margin-bottom:var(--spacing-xl)}
.search-results__title{font-size:var(--font-size-lg);font-weight:700}
.search-results__count{font-size:var(--font-size-sm);color:var(--color-text-light)}
.search-result{padding:var(--spacing-xl) 0;border-bottom:1px solid var(--color-border)}
.search-result:last-child{border-bottom:none}
.search-result__title{font-size:var(--font-size-lg);font-weight:700;margin-bottom:var(--spacing-sm)}
.search-result__title a{color:var(--color-navy);text-decoration:none}
.search-result__title a:hover{color:var(--color-sky)}
.search-result__excerpt{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-sm);line-height:var(--line-height-relaxed)}
.search-result__date{font-size:var(--font-size-xs);color:var(--color-text-light)}

/* ============================================================
   Archive
   ============================================================ */
.archive-header{text-align:center;padding:var(--spacing-3xl) 0 var(--spacing-2xl)}
.archive-title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;margin-bottom:var(--spacing-sm)}
.archive-desc{font-size:var(--font-size-md);color:var(--color-text-light);max-width:600px;margin:0 auto}

/* ============================================================
   Animations (IntersectionObserver)
   ============================================================ */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.is-visible{opacity:1;transform:translateY(0)}
.slide-up{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease}
.slide-up.is-visible{opacity:1;transform:translateY(0)}
.slide-left{opacity:0;transform:translateX(-40px);transition:opacity 0.6s ease,transform 0.6s ease}
.slide-left.is-visible{opacity:1;transform:translateX(0)}
.slide-right{opacity:0;transform:translateX(40px);transition:opacity 0.6s ease,transform 0.6s ease}
.slide-right.is-visible{opacity:1;transform:translateX(0)}
.scale-in{opacity:0;transform:scale(0.9);transition:opacity 0.5s ease,transform 0.5s ease}
.scale-in.is-visible{opacity:1;transform:scale(1)}

/* Délais d'animation en cascade */
.delay-1{transition-delay:0.1s}
.delay-2{transition-delay:0.2s}
.delay-3{transition-delay:0.3s}
.delay-4{transition-delay:0.4s}

/* Respecter prefers-reduced-motion */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
    .fade-in,.slide-up,.slide-left,.slide-right,.scale-in{opacity:1;transform:none}
}

/* ============================================================
   Responsive complémentaire
   ============================================================ */
@media(max-width:1280px){
    .features-grid{grid-template-columns:repeat(3,1fr);gap:var(--spacing-xl)}
    .content-with-sidebar{grid-template-columns:1fr 280px}
}

@media(max-width:1024px){
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .content-with-sidebar{grid-template-columns:1fr}
    .sidebar{position:static}
    .testimonials-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
    .features-grid{grid-template-columns:1fr}
    .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
    .search-form{flex-direction:column}
    .carousel__btn--prev{left:var(--spacing-xs)}
    .carousel__btn--next{right:var(--spacing-xs)}
    .timeline{padding-left:var(--spacing-2xl)}
    .timeline__dot{left:calc(-1 * var(--spacing-2xl) + 8px)}
    .partners-grid{gap:var(--spacing-lg)}
    .partners-grid img{height:36px}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
    .site-header,.site-footer,.back-to-top,.hamburger,.mobile-menu,.carousel__btn,.carousel__dots{display:none!important}
    body{color:#000;background:#fff;font-size:12pt}
    a{color:#000;text-decoration:underline}
    .hero{min-height:auto;padding:2rem 0;background:none;color:#000}
    .hero__title,.hero__subtitle,.section__title{color:#000}
    .entry-content{padding:0}
    .formation-card{break-inside:avoid;border:1px solid #ccc}
    .page-header{background:#eee;color:#000;padding:1rem 0}
    .page-header__title{color:#000}
    .page-header .breadcrumb__link,.page-header .breadcrumb__current{color:#000}
}