/*
Theme Name: Colis Express (Astra Child)
Template: astra
Description: Child theme Astra pour le site vitrine + suivi de colis.
Version: 1.0.1
*/

@import url('../astra/style.css');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ce-graphite:#22262A;
  --ce-ivoire:#F5F1E8;
  --ce-ocre:#C98A2E;
  --ce-vert:#1E6B44;
  --ce-texte:#2A2A2A;
  --ce-texte-clair:#F5F1E8;
  --ce-border:#D8D2C4;

  --ce-font-display:'Fraunces', serif;
  --ce-font-body:'Inter', sans-serif;
  --ce-font-mono:'IBM Plex Mono', monospace;
}

body{
  font-family:var(--ce-font-body);
  color:var(--ce-texte);
  background:var(--ce-ivoire);
}

h1,h2,h3,.ce-display{
  font-family:var(--ce-font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.1;
}

/* Astra impose sa propre couleur de titre avec une spécificité plus forte :
   on la surcharge explicitement selon le fond de la section. */
.ce-section--dark h1,
.ce-section--dark h2,
.ce-section--dark h3,
.ce-section--dark p{
  color:var(--ce-texte-clair) !important;
}
.ce-section:not(.ce-section--dark) h1,
.ce-section:not(.ce-section--dark) h2,
.ce-section:not(.ce-section--dark) h3{
  color:var(--ce-texte) !important;
}

.ce-mono{ font-family:var(--ce-font-mono); }

/* ---------- Fix : neutralise le flex d'Astra pour empiler nos sections ---------- */
.ce-page-wrap{
  display:block !important;
  width:100% !important;
  flex:1 1 100% !important;
}
.ce-page-wrap .ce-section{
  display:block;
  width:100%;
}

/* Filet de sécurité : force le conteneur principal en pleine largeur,
   au cas où Astra réserve encore une colonne de sidebar vide. */
#primary, .ast-container, .site-content,
.ast-container > .content-area{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  grid-template-columns:1fr !important;
  display:block !important;
}
#secondary, .widget-area, .sidebar-main{
  display:none !important;
  width:0 !important;
}
.ce-hero-institution{
  width:100%;
}

/* ---------- Hero institutionnel (accueil général de l'entreprise) ---------- */
.ce-hero-institution{
  position:relative;
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 32px;
  background-color:var(--ce-graphite);
  overflow:hidden;
  width:100%;
}
.ce-hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
  z-index:1;
}
.ce-hero-slide.active{ opacity:1; }
.ce-hero-contenu{ position:relative; z-index:2; }
.ce-hero-institution h1{
  font-size:clamp(32px,5vw,50px);
  max-width:16ch;
  margin:0 0 8px;
}
.ce-hero-dots{
  position:absolute;
  bottom:24px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; gap:10px;
}
.ce-hero-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(245,241,232,.4);
  cursor:pointer;
  transition:background .2s ease;
}
.ce-hero-dot.active{ background:var(--ce-ocre); }

/* ---------- Layout utilitaires ---------- */
.ce-section{ padding:80px 24px; max-width:1100px; margin:0 auto; }
.ce-section--dark{ background:var(--ce-graphite); color:var(--ce-texte-clair); }
.ce-eyebrow{
  font-family:var(--ce-font-mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--ce-ocre);
  margin-bottom:14px;
}

/* ---------- Boutons ---------- */
.ce-btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:3px;
  font-weight:600;
  text-decoration:none;
  font-size:15px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ce-btn:focus-visible{ outline:3px solid var(--ce-ocre); outline-offset:2px; }
.ce-btn--primary{ background:var(--ce-ocre); color:#1a1a1a; }
.ce-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(201,138,46,.35); color:#1a1a1a; }
.ce-btn--outline{ border:1.5px solid var(--ce-texte-clair); color:var(--ce-texte-clair); background:transparent; }
.ce-btn--outline:hover{ background:rgba(245,241,232,.08); color:var(--ce-texte-clair); }

/* ---------- Ligne de route (hero) ---------- */
.ce-route-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-family:var(--ce-font-mono);
  font-size:14px;
  margin:32px 0;
  color:var(--ce-texte-clair);
  opacity:.9;
}
.ce-route-line span.sep{ color:var(--ce-ocre); }

/* ---------- Grille de services ---------- */
.ce-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:40px;
}
.ce-service-card{
  border:1px solid var(--ce-border);
  background:#fff;
  padding:28px;
  border-radius:4px;
}
.ce-service-card h3{ font-size:22px; margin:0 0 10px; }
.ce-service-card p{ margin:0 0 16px; color:#555; }
.ce-service-card a{ color:var(--ce-ocre); font-weight:600; text-decoration:none; }

/* ---------- Formulaire de suivi ---------- */
.ce-track-form{ display:flex; gap:10px; flex-wrap:wrap; margin:32px 0; }
.ce-track-form input[type=text]{
  flex:1;
  min-width:220px;
  padding:14px 16px;
  border:1.5px solid var(--ce-border);
  border-radius:3px;
  font-family:var(--ce-font-mono);
  font-size:15px;
}

/* Tampon du numéro de tracking */
.ce-stamp{
  display:inline-block;
  border:2px dashed var(--ce-ocre);
  padding:10px 18px;
  transform:rotate(-2deg);
  font-family:var(--ce-font-mono);
  font-size:18px;
  font-weight:500;
  color:var(--ce-ocre);
  margin-bottom:24px;
}

/* Timeline statut */
.ce-timeline{ list-style:none; margin:0; padding:0; }
.ce-timeline li{
  position:relative;
  padding:0 0 28px 28px;
  border-left:2px solid var(--ce-border);
}
.ce-timeline li:last-child{ border-left-color:transparent; padding-bottom:0; }
.ce-timeline li::before{
  content:'';
  position:absolute; left:-7px; top:2px;
  width:12px; height:12px; border-radius:50%;
  background:var(--ce-ocre);
}
.ce-timeline li.done::before{ background:var(--ce-vert); }
.ce-timeline .statut{ font-weight:600; }
.ce-timeline .date{ font-family:var(--ce-font-mono); font-size:13px; color:#777; }

/* ---------- Grille Services / Produits (photo + icône + titre) ---------- */
.ce-icon-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
  gap:24px !important;
  margin-top:40px;
  width:100%;
}
.ce-icon-card{
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--ce-border);
  display:block !important;
}
.ce-icon-card__img{
  position:relative;
  height:220px !important;
  min-height:220px !important;
  max-height:220px;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  padding:18px;
  box-sizing:border-box;
}
.ce-icon-card__badge{
  width:44px;
  height:44px;
  border-radius:8px;
  background:rgba(245,241,232,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  flex-shrink:0;
}
.ce-icon-card__img h3{
  color:var(--ce-texte-clair) !important;
  font-size:20px;
  margin:0 !important;
  line-height:1.25;
}
.ce-icon-card__body{ padding:20px 22px 24px; }
.ce-icon-card__body p{ margin:0; color:#555; font-size:15px; line-height:1.6; }

/* Variante "Produits" : pas de texte sous l'image, juste la photo + le titre */
.ce-icon-card--simple .ce-icon-card__img{ height:200px !important; min-height:200px !important; }

@media (max-width:640px){
  .ce-section{ padding:56px 18px; }
}